Question

当我单击Div时，ajax / jquery不会将其选中。

ajax调用本身只是一个占位符，目前的问题是，单击Div jQuery时无法将其选中。

<div class="php-task">
  <h1>PHP</h1>
  <div id="php1" class="text">
    <p>Display/setvars</p>
  </div>
</div>

$("#php1").click(function (e) { 
  e.preventDefault();

  $.ajax({
    type: "POST",
    url: "php/pagehandler.php",
    data: {page: "task",task: 1},
    success: function (response) {
      location.reload();
    }
  }); 
});

Answer 1

您可以尝试以下代码吗？页面加载后可能会动态加载HTML。

$(function(){

    $('body').on('click', '#php1', function(e){
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "php/pagehandler.php",
        data: {page: "task",task: 1},
        success: function (response) {
          location.reload();
        }
      }); 

    });

});

Answer 2

只是向您展示它不适用于重复的id元素（并且可以作为带有id的第一个div的简化示例，该必须是唯一的）：

$("#php1").click(function (e) { 
  console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="php-task">
  <h1>PHP</h1>
  <div id="php1" class="text"><!-- clicking this will trigger the handler -->
    <p>Display/setvars</p>
    <p>clicking this will trigger the handler</p>
  </div>
</div>
<div class="php-task">
  <h1>PHP</h1>
  <div id="php1" class="text"><!-- clicking this will NOT trigger the handler -->
    <p>Display/setvars</p>
    <p>clicking this will NOT trigger the handler</p>
  </div>
</div>

Answer 3

我认为在您有多个div php1,php2,php3...的情况下，最好使用类来附加click事件：

$(function() {
  $(".php-task .text").click(function(e) {
    e.preventDefault();

    console.log('Task with id : ' + this.id + ' clicked.');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="php-task">
  <h1>PHP</h1>
  <div id="php1" class="text">
    <p>Display/setvars</p>
  </div>
</div>
<div class="php-task">
  <h1>PHP</h1>
  <div id="php2" class="text">
    <p>Display/setvars</p>
  </div>
</div>
<div class="php-task">
  <h1>PHP</h1>
  <div id="php3" class="text">
    <p>Display/setvars</p>
  </div>
</div><br><br><br>

Answer 4

$(document).ready(function() {
                   $("#task").click(function (e) 
                 { 
                 e.preventDefault();

                $.ajax
                ({
                   type: "POST",
                   url: "php/pagehandler.php",
                   data: {page: "task"},
                      success: function (response) 
                      {
                          location.reload();
                      }
                }); });

                });

添加：$（document）.ready（function（）达到了目的。

jQuery未选择Div onclick

4 个答案: