.Click after .append(

Question

I've un problem with an .append with jQuery where i generate an input type button. I want to put an event on the button who from to the .append . Do you think that it is possible ?

I show you the code :

$('#MatchSeason').append("<tr><td>" + ui.item.label + "</td>" +
                         "<td id=" + 'Id' + " style=" + 'display:none' + ">" + ui.item.value + "</td>" +
                         "<td id=" + 'GroupingId' + " style=" + 'display:none' + ">" + ui.item.GroupingId + "</td>" +
                         "<td id="+'btnDeleteCell'+"><input type="+'button'+" id="+'btnDelete'+" name="+'btnDelete'+" value="+'Supprimer'+" </td>"+"</tr>"
                        )    


$('#btnDelete').click(function () {
            alert('test') 
});

Thanks for the answers !

How does your actual code look like? Are the two snippets located exactly like that? FYI, there is no need for string concatenation if you know the string values. — Felix Kling, Jul 21 '14 at 15:11
With the markup including ``s, are you appending this content multiple times? If so, that will create multiple elements with the same `id`, which is invalid. IDs should be unique throughout the document and `$('#btnDelete')` will only find the 1st. — Jonathan Lonowski, Jul 21 '14 at 15:17
i've just closed the input but it change nothing, i try the next response and it works ! — Julien698, Jul 21 '14 at 15:24
Next, provide a *complete* example of your code. As it is posted now, there is no reason why binding the handler shouldn't work (besides typos). — Felix Kling, Jul 21 '14 at 15:27

score 1 · Accepted Answer · answered Jul 21 '14 at 15:10

1

try

$(document).on('click','#btnDelete',function () {
      alert('test') 
});

or

$('#MatchSeason').on('click','#btnDelete',function () {
      alert('test') 
});

answered Jul 21 '14 at 15:10

Tamil Selvan C

18,342
12
44
63

1

Why should the OP try this? – Felix Kling Jul 21 '14 at 15:13
Use this method, so the event will delegate properly. – eg_dac Jul 21 '14 at 15:13
With the statement order in the question, the element should exist for a direct binding to succeed. – Jonathan Lonowski Jul 21 '14 at 15:14
1

not true. take a read here to understand. http://api.jquery.com/on/ – eg_dac Jul 21 '14 at 15:14
The second solution works good thanks ! – Julien698 Jul 21 '14 at 15:25
@eg_dac: not sure who you are addressing, but the code, as posted, would append the new content *before* the handler is bound. In this case event delegation is not needed. – Felix Kling Jul 21 '14 at 15:32
i think it's a better habit to get into. providing delegates should be a standard. – eg_dac Jul 21 '14 at 15:45

.Click after .append(

1 Answers1