Jquery не поднимает Div по клику

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

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

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

                });

Добавление: $ (документ) .ready (функция () добилась цели.

Answer 2

Просто чтобы показать вам, что он не будет работать для дублирующих элементов id (и что он действительно работает как сокращенный пример для первого div с этим id, который должен быть уникальным):

$("#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

Можете ли вы попробовать ниже код?Возможно, ваш 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();
        }
      }); 

    });

});