Javascript/Jquery onClick using HTML Div not working

Question

When I click on my "php1" div it doesn't do anything.

The location.reload() is a placeholder, just an easy way of knowing whether or not the onClick works.

    <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

Can you try below code? Might be your HTML is dynamically loaded after page load.

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

Just to show you that it won't work for duplicate id elements (and that it does work as a reduced example for the first div with that id , which must be unique ):

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

I think in your case with multiple divs php1,php2,php3... it will be better to attach the click event using classes instead :

 $(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();
            }
        });
    });

});

Adding the following did the trick:

$(document).ready(function()