Hello, Why my button B does not work?

Question

why my Button B does not show alert popup?

Below is my codes inside separate files

.html:

<html>
<body>
    <input type="button" class="popup" value="BUTTON A"/><br>
    <input type="button" class="displaymeh" value="SHOW"/>
<div id="display">
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

.php:

<?php
    echo "<input type='button' class='popup2' value='BUTTON B'/>";
?>

.js:

$(".popup").on('click', function(){
    alert("HELLO WORLD!");
});

$(".popup2").on('click', function(){
        alert("HELLO WORLD! 2");
});

$(".displaymeh").on('click', function(){
    $.ajax({
        url: 'display.php',
        success: function(data) {
        $('#display').html(data);
        }
    });
});

The reason I place the button inside .php, because I'm planning to display database table inside the php and the button to manage the database such as delete.

Edit: No, this is not the same with the Difference between .on('click') vs .click() and why I already have negative downvote within 1 hour, I will never know.

Possible duplicate of [Difference between .on('click') vs .click()](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) — u_mulder, Sep 10 '16 at 10:40
1 - you will have two elements with the same ID - that will cause all sorts of "fun", and 2 - when the jquery binds the click event, the B button doesn't exist, so that's why — Jaromanda X, Sep 10 '16 at 10:41
@u_mulder - that will fix half the problem, not sure how jquery deals with multiple identical id's (probably will) — Jaromanda X, Sep 10 '16 at 10:43

NoobishPro · Accepted Answer · 2016-09-10T12:17:46.487

1

You are only allowed to have 1 id of the same name per page. id attributes must be unique. You could either bind BUTTON B seperately by giving it a different ID (id="popup2") for example, or give it a class instead of an id, and use the class binder instead:

Your HTML is also invalid. Create inputs like this:

<input type="button" class="popup" value="BUTTON A" />
<br>
<input type="button" class="displaymeh" value="SHOW" />
<input type='button' class='popup' value='BUTTON B' />

The other issue is that the element simply doesn't exist on page load. You have to re-do the bindings whenever you add new HTML to the dom! Like so:

JS:

$(function() {
  //set the button bindings initially
  setButtonBindings();

  $(".displaymeh").on('click', function() {
    $.ajax({
      url: 'display.php',
      success: function(data) {
        $('#display').html(data);
        //re-set the button bindings after html has been added
        setButtonBindings();
      }
    });
  });

});

function setButtonBindings() {
  $('.popup').off("click"); //so it won't trigger multiple times
  $('.popup').on("click", function() {
    alert("I like cheese");
    return false;
  });
}

-- try to use .on("click") and such bindings from now on instead of .click();. It's more reliable and .click() and such are deprecated functions. They are even completely removed in jQuery 3.x

edited Sep 10 '16 at 12:17

answered Sep 10 '16 at 10:43

NoobishPro

2,539
1
12
23

Hi, thanks for the advice, especially .on('click'), I am need to be more up to date. by the way, the code still doesnt work. – skyrum rummy Sep 10 '16 at 11:57
See my updated answer and the example fiddle. Find the differences between your code and the fiddle. -- OHH wait, I get your issue now. Sorry, I didn't understand it before! Let me create a quick fix for ya. – NoobishPro Sep 10 '16 at 12:12
Thank you sir on the , I made lot mistake. Yours doesn't have php file. my second button is inside another php file. – skyrum rummy Sep 10 '16 at 12:15
I whipped up an answer for you. I didn't realise the button came from the PHP call, sorry. Your question is kind of vague. See my updated answer and it should work :) – NoobishPro Sep 10 '16 at 12:18
My bad, vague and careless is my middle name. by the way it worked! HELLO WORLD! thank you. by the way can you explain why it doesn't work at the first place? what error name is happening? – skyrum rummy Sep 10 '16 at 12:25
I did explain it in my answer. When you set a binding in your javascript, the binding gets set on any element in the dom. It gets saved with the element, that's how it works. So on the element, an action is set "On click > trigger function". However, you AJAX call your element in at a later time, so the binding was never set on the newly added element. Therefore; you re-set the bindings after adding it. This time, the new element gets included within the binding :) If that fixed your problem, don't forget to accept the answer so people know it's been fixed! – NoobishPro Sep 10 '16 at 12:37

Hello, Why my button B does not work?

1 Answers1