CODEWITHSUNDEEP
jqueryhtml
Rz --
Rz --

Reputation: 13

Jquery trouble with select options on html()

When i call the on click with html() didn't work the options on

JS: 

$(document.body).on('click', '.pls', function() {
        $(".pls").html('<select id="plselect"><option value="list1">list1</option><option value="list2">list2</option</select><br>');
});

HTML:

<div class="pls">pls</div>

^This Example: http://jsfiddle.net/B5xqp/1/

Upvotes: 0

Views: 53

Answers (1)

Praveen
Praveen

Reputation: 56509

Since the added select is within the class .pls, the click event is causing the trouble.

So do like this

$(document.body).on('click', '.pls', function() {
        $(".pls").html('<select id="plselect"><option value="list1">list1</option><option value="list2">list2</option</select><br>');
    $(document.body).off('click');  
});

Once the select is added to the class, remove the click event using .off() event handler attachment.

JSFiddle1

Updates: Based on your comments it seems you don't want to remove the event handler. So if I understood correctly you can try like this

$(document.body).on('click', '.pls', function () {
    $(".pls").after('<select id="plselect"><option value="list1">list1</option><option value="list2">list2</option</select><br>');
});

JSFiddle2

Upvotes: 4

Related Questions