JQuery: on doesn't work properly

Question

I have create dynamic html buttons and I want to set click event to them. Here is my html output and codes :

   <td style="width:90px;">
<input type="button" class="btn_Yeni" id="btnYeni"></td>

$(".btn_Yeni").on("click", function () {
    alert('asd');
});

$(".btn_Yeni").trigger("click");

Nothing happens after I click the button. Do you have any suggestion?

See these previous answers for an explanation of how to use delegated event handling to solve your issue. You need to use `.on()` differently: http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376, http://stackoverflow.com/questions/9985090/jquery-on-does-not-work-but-live-does/9985137#9985137, http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-elements-that-are-added-after-the-event-handler-is-cre/9814409#9814409. — jfriend00, Nov 05 '13 at 07:18

palaѕн · Accepted Answer · 2013-11-05T07:25:28.063

2

Since the html buttons are added dynamically, you need to use event delegation to register the event handler like:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '.btn_Yeni', function(event) {
     alert('asd'); 
});

UPDATE

Since, the buttons are added to a table cells, as visible in your HTML markup, you can do this:

$('#tableID').on('click', '.btn_Yeni', function(event) {
     alert('asd'); 
});

This will attach your event to any button within the #tableID element, reducing the scope of having to check the whole document element tree and increasing efficiency.

edited Nov 05 '13 at 07:25

answered Nov 05 '13 at 07:15

palaѕн

72,112
17
116
136

1

It is not a wise choice to bind your event delegates to the document. you should bind closer to the element that will be triggering the event. – Itanex Nov 05 '13 at 07:21

score 0 · Answer 2 · answered Nov 05 '13 at 07:14

Since you have dynamic buttons you need to use event delegation.

Just using .on() to register event handlers does not make use of event delegation, it has a very specific format for making use of event delegation. The event should be attached to an element which is already present in the page(like the document object in the below case) then the dynamic element selector has to be passed as the second parameter to the on() method

$(document).on("click", ".btn_Yeni", function () {
    alert('asd');
});

Royi Namir · Answer 3 · 2013-11-05T07:25:28.567

0

This is the approach when using dynamic elements.

$("body").on("click",".btn_Yeni", function () {
    alert('asd');
});

How is it done:

the handler is not attached to the element itself ( cuz it does not exists when registering) - so you attach the handler to the body element. and via event bubbling - the delegate element is checked(against) when it reaches the body ( where the handler is actually attached to).

edited Nov 05 '13 at 07:25

answered Nov 05 '13 at 07:15

Royi Namir

144,742
138
468
792

It's better to attach it to the *closest static parent* rather than `body`. – ahren Nov 05 '13 at 07:21
@ahren No. you can not know if someone/js/plugin manipulate your so called : "static closest". puting it in a body is the best approach. PS : LIVE used to do it in the document. ( much far from body). – Royi Namir Nov 05 '13 at 07:23

score 0 · Answer 4 · answered Nov 05 '13 at 07:34

I have put together a fiddle for you to explore dynamic button additions and using the on method for event delegation.

<ul id="btnCollection">
    <li>
        <input type="button" class="btn_Yeni" value="Your Button" />
    </li>
</ul>

var button = $("#btnCollection:last-child").html();

$("#btnCollection").on("click", ".btn_Yeni", function (event) {
    alert("Adding another button");

    $("#btnCollection").append(button);

});

http://jsfiddle.net/itanex/yak7c/

score 0 · Answer 5 · answered Nov 05 '13 at 07:35

0

DEMOenter link description here

$(document).on("click", ".btn_Yeni", function () {
    alert('asd');
});
function addrow(){
 var $tr = $("#baserow")   
 var $clone=$tr.clone();
 $tr.after($clone);    
}

answered Nov 05 '13 at 07:35

Dev

6,628
2
25
34

JQuery: on doesn't work properly

5 Answers5