jQuery .on click event does not occur

Question

Hi and thanks for reading. I've been trying to avoid using HTML onclick="__" references and instead putting these events in my .js file. After reading about jQuery's .click() and then .on() events, I tried to use this in my code for a button.

edit In my haste to make up a <p> that didn't have the rest of the contents, I entered "name" instead of "id". Many answers have recommended I either switch to a p[name=p+ or #p+ reference, but my main problem has been that I can't even hit the alert before the reference to the id/name. Thanks again for your answers.

HTML:

<p name="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

JS:

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("p" + $(this).attr("name")).remove();
    });
});

The above code won't even get to the alert when I click the button. I've also tried referring to the button by name and ID, and going by $(document).ready($('.deleter')___.

I tried using the $(handler) format as well to have the click event be set after the document is ready. Neither way seems to work. At this point, I resorted to onclick="deleteButton()" and have a deleteButton() function in my .js file, but the function won't detect $(this) and just deletes all <p> tags.

The rest of my javascript is working. I haven't tried including this .on() at the bottom of the HTML, but I'm trying to avoid scripts in my HTML as well. For completeness' sake, I've been testing on both Chrome and Firefox, using a .jsp file to render the HTML.

Thanks again.

Edits

here's how I'm referencing my jquery and js, directly copy-pasted.

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>

here is how my html looks leading up to the div where the

is inserted:

<body>
    <div id="wrapper">
        <div id="header">Card Draw Probability Calculator</div>
        <div id="main">
            <div id="cardList">
                <fieldset>
                    <legend> Select cards for probability calculation</legend>

                        <div id="innerCardList"></div>

Here is how the <p> is generated:

function newestCardListLineMaker() {
    var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');

    $("#innerCardList").append($newLine);

On another note, which I should have seen before as significant: the HTML that the .click or .on(click, handler) is referencing has been created by another js function.

Your code seems to work on standalone check http://jsfiddle.net/ka5zU/ — Sibu, Sep 04 '12 at 05:56
Did you include a reference to jQuery in your HTML document? And also, is your script.js file BELOW this reference? — ahren, Sep 04 '12 at 05:56
to remove this could be: `$("p[name=p" + $(this).attr("name")+"]").remove();` — Alex Ball, Sep 04 '12 at 05:57
@ahren I've added my references to .js and jquery in my edits of the post. Do you think there's a problem there? — jason lee, Sep 04 '12 at 17:37

Sibu · Answer 1 · 2012-09-04T10:00:53.820

1

working demo

<p id="pBananas"> junk </p> 
    <button class="deleter" id="dBananas" name="Bananas">Delete</button>

    $(document).ready(function() {
        $('.deleter').click(function() {
            alert('click function works');
            $("#p" + $(this).attr("name")).hide();
        });
    });

Edited Jsfiddle

edited Sep 04 '12 at 10:00

answered Sep 04 '12 at 06:02

Sibu

4,609
2
26
38

Hi Sibu. Why are you hiding instead of removing? – jason lee Sep 04 '12 at 08:37
Also... I tried using the #p, but it still won't show the alert or hide the
– jason lee Sep 04 '12 at 08:39
@jasonlee remove() will completely remove matched elements from the DOM completely so if you need to show it later you can't. Did you check the jsfiddle link..its working – Sibu Sep 04 '12 at 08:44
I checked the link. It works in the jsfiddle link, but .click will not work, as I've now tested it, on any element on my page. – jason lee Sep 04 '12 at 08:55
@jasonlee i have edited my answer as your new requirements..though your question was unclear, let me know if you need some other help – Sibu Sep 04 '12 at 10:09
Do you have any ideas on why my project's .click() doesn't actually detect click events? Your code seems to work well in jsfiddle, but when I move it to my project, it won't work even when the other parts of the script will. – jason lee Sep 04 '12 at 17:46

score 1 · Accepted Answer · answered Sep 04 '12 at 06:30

1

Try using .on() function, so your code would be:

$(document).ready({
  $('.deleter').on('click', function(){
     //do stuff here
  });
});

Even better would be this:

$(document).ready({
   $('div_above_.deleter').on('click', '.deleter', function(){
     // do stuff here
   });
});

Hope this helps you.

answered Sep 04 '12 at 06:30

JanHocevar

199
2
9

This answer was closest to helping me figure out the answer. I needed to delegate the actions because the
s were created by js. Thanks.
– jason lee Sep 04 '12 at 21:31

score 1 · Answer 3 · answered Sep 04 '12 at 06:32

1

I have modify your javascript code check it.

$('.deleter').click(function() {
        alert('click function works');
        var p="p"+$(this).attr("name");
        $('p[name='+p+']').remove();
});

answered Sep 04 '12 at 06:32

Hkachhia

4,463
6
41
76

sajawikio · Answer 4 · 2012-09-04T06:06:57.320

0

For me it works. Didn't delete the Paragraph element though so your code should look like this instead:

<p id="pBananas"> junk </p> 
<button class="deleter" id="dBananas" name="Bananas">Delete</button>

and

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        $("#p" + $(this).attr("name")).remove();
    });
});

edited Sep 04 '12 at 06:06

answered Sep 04 '12 at 05:59

sajawikio

1,516
7
12

I see how I might have referred to the paragraph element incorrectly, but why would the alert not show? – jason lee Sep 04 '12 at 08:35
Sorry for being unclear - only the alert showed (it did show for me, oddly enough), and just that in your code, paragraph element wasn't removed but alert did show when I tested your exact code as you gave it. – sajawikio Sep 04 '12 at 08:46
Unfortunately my problem is that I can't even get to the alert. I made an edit above noting how the HTML containing the
was made after the page has already loaded. Could that be the problem?
– jason lee Sep 04 '12 at 08:50

score 0 · Answer 5 · answered Sep 04 '12 at 06:08

0

$(document).ready(function() {
    $('.deleter').click(function() {
        alert('click function works');
        //alert($(this).attr("name"));
        $("p[name=p" + $(this).attr("name") + "]").remove();
    });
});

answered Sep 04 '12 at 06:08

Ghassan Elias

2,213
1
14
17

score 0 · Answer 6 · answered Sep 05 '12 at 20:33

The final code I used to complete the .on('click') event was:

$(document).ready(function() {
    $("div#innerCardList").on("click", "button.deleter", function() {
        var paraName = $(this).closest("p").attr("id");
        $("#" + paraName).remove();
    });

});

The HTML elements which I wanted to assign click events to were generated after the page was already loaded. I needed to delegate the events to the containing div.

Thanks for all the help and different perspectives!

jQuery .on click event does not occur

6 Answers6