Jquery: Selector can't find class?

Question

I'm trying to advance the Jquery-autcomplete function. I want Jquery-autocomplete to create new rows in a table. That works so far. But I want Jquery to add a delete-button. So the user is able to delete one of his added items.

    $(document).ready(
function() {


//create an new <tr> <td> in #log   
    function log( message ) {
        $("<tr> <td>"  + message + "<input class='Entf' type='button' value ='Entfernen' />" + "</td></tr>").appendTo("#log");
        $( "#log" ).attr( "scrollTop", 0 );}


// get the values from a json-source
        $( "#REMOTE" ).autocomplete({
            source: "json.php",
            minLength: 0,
            select: function( event, ui ) {
                log( ui.item ?
                    ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );}
});


// this is just a test if jquery recognizes the click       
         $('.Entf').click(function(event){
     alert("Thanks for visiting!");
   });
    });

But jQuery doesen't recognize the click of the element it created. To check fpr erros, I placed one row in the html. This button works. But when I add a row via Jquery, the added button deon't work. Here an example from firebug:

<table id="log" border="0" width="400">
<tbody>
<tr>
<td>
test
<input class="Entf" type="button" value="Entfernen">         //this one workes fine. it comes from the original html
</td>
</tr>
<tr>
<td>
daniel aka 121
<input class="Entf" type="button" value="Entfernen">     //this one doesn't work. it's the one that was added by Jquery
</td>
</tr>
</tbody>
</table>

Any ideas?

Thank you! Exuse my english :)

Naftali · Accepted Answer · 2011-03-29 19:15:08Z

5

use jQuery live():

$('.Entf').live('click',function(event){
     alert("Thanks for visiting!");
   });

using live enables jQuery use callbacks on selectors that are dynamically created by javascript

answered Mar 29, 2011 at 19:15

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Naftali Over a year ago

@brill - .and to that end on stackoverflow you select a correct answer to be 'accepted' that way if you have future Q's more people will be glad to help ^_^

Greg Woods Over a year ago

'live' was replaced by 'delegate', which was then replaced with 'on'

gailbear · Accepted Answer · 2011-03-29 19:16:53Z

2

Because the element is getting created after the handlers are bound, it's not registering. You need something like this:

$("body").delegate(".Entf", "click", function() { //function here });

answered Mar 29, 2011 at 19:16

gailbear

5193 silver badges14 bronze badges

Comments

user2168421 · Accepted Answer · 2013-03-14 07:00:07Z

1

Use jQuery on() in jQuery 1.7+

$(document).on("click",".Entf",function(event){
     alert("Thanks for visiting!");
   });

Use jQuery delegate() in jQuery 1.4.3+:

$(document).delegate(".Entf", "click", function(event){
     alert("Thanks for visiting!");
   });

And use jQuery live() in jQuery 1.3:

$('.Entf').live('click',function(event){
     alert("Thanks for visiting!");
   });

edited Mar 14, 2013 at 7:00

answered Mar 14, 2013 at 5:48

user2168421

112 bronze badges

Comments

Levi Morrison · Accepted Answer · 2011-03-29 20:17:49Z

0

When you have generated content, you need to bind the button, ie, after you have generated the content, do:

 $('.Entf').click(function(event){
     alert("Thanks for visiting!");
});

again.

Edit: As pointed out by Neal, be careful when doing it this method. The reason as that it will bind to ALL .Entf elements, not just the new ones, causing multiple click events. See http://jsfiddle.net/R9Kb4/2/ for an example of how to create and bind things without having to deal with live() or with multiple binding.

edited Mar 29, 2011 at 20:17

answered Mar 29, 2011 at 19:16

Levi Morrison

19.6k8 gold badges69 silver badges87 bronze badges

18 Comments

Naftali Over a year ago

this is untrue, just use jQuery and live()

Levi Morrison Over a year ago

uh... that's a little harsh, buddy. Rebinding the click the way I mentioned DOES work... you never even tried it. Please think before you downvote!

Naftali Over a year ago

@Levi, yes you can rebind, but it is not the best thing to do

Levi Morrison Over a year ago

@Neal What's the point of downvoting something for being 'untrue' when it does in fact work? Anyway, congrats on getting upvoted, Neal.

Naftali Over a year ago

@Levi, you can see from this example that the click gets multiplied exponentially on prev elements: jsfiddle.net/maniator/HHBQL

|

Collectives™ on Stack Overflow

Jquery: Selector can't find class?

4 Answers 4

2 Comments

Comments

Comments

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related