jQuery event not firing on dynamically generated content

Question

I an using ASP.NET MVC 4 to dynamically load a PartialView which contains a option. I want to bind a jQuery dblclick event to this and get the selected option, but the event is not firing. Here is my code:

 <select size="5" id="popup-list">
     <option value="test">test</option>
 </select>

jQuery code:

$(document).ready(function(){

    $("#popup-list").live("dblclick", function () {
        var name;
        $("select option:selected").each(function () {
            name = this;
            name = this.text();
        });
    });

});

I am not sure as the why this is causing a problem. The code is in a document.ready(), which should take care of the dynamic loading.

it is event delegation issuue. read more here . http://learn.jquery.com/events/event-delegation/ — Nishit Maheta, Mar 16 '15 at 12:17

score 2 · Accepted Answer · answered Mar 16 '15 at 12:18

Use On method of jquery.

$("body").on("dblclick", "#popup-list", function () {
    var name;
    $("select option:selected").each(function () {
        name = this;
        name = this.text();
    });
});

Note: on method available on jquery version 7 onwards

score 2 · Answer 2 · answered Mar 16 '15 at 12:19

Try one of this: Method:1

$(document).ready(function(){
    $("#popup-list").on("dblclick", function () {
        var name;
        $("select option:selected").each(function () {
            name = this;
            name = this.text();
        });
    });
});

Method:2 Or

$(document.body).on("dblclick", '#popup-list', function () {
---your code----
});

Method:3

$(document).on("dblclick", '#popup-list', function () {
---your code----
});

jQuery event not firing on dynamically generated content

2 Answers2