4

The click function works for the <li> element that is part of the HTML but not for the <li> elements loaded programmatically on pageinit. I can't figure out why not. (this code has all it needs to run)

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>   
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <h1>My Title</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>Hello world</p>
            <ul id="allyourlists" class="current" data-role="listview" data-filter="false">
                <li><a href="index.html" data-role="button" id="delalist">List0:</a></li>
            </ul>       
        </div><!-- /content -->

    </div><!-- /page -->
    <script>
    //Why is delete button not firing? 
    $('#thelists').bind('pageinit', function(event) {
        console.log('in bind pageinit for yourlists');
        var thelists = ["list1", "list2"];
        console.log(thelists);
        $.each(thelists, function(index, alist) {
            $('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
        });
        $('#allyourlists').listview('refresh');
    });

    //gets the val of val1 from the previois call
    $("#delalist").click(function (e) { 
        e.stopImmediatePropagation();
        e.preventDefault();
        alert ('in delalist') ;
    });   

    </script>

</body>
</html>
Mrchief
  • 75,126
  • 20
  • 142
  • 189
mcktimo
  • 1,440
  • 4
  • 19
  • 35

5 Answers5

4

Use either the deprecated live function:

$("#delalist").live('click',function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

or use on (jQuery > 1.7):

$('body').on('click', "#delalist", function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

Also I would suggest using a class and not an id because ids should be unique

Naftali
  • 144,921
  • 39
  • 244
  • 303
1

Use on or delegate for events to work on dynamically created elements.

Using on (jQuery ver 1.7+)

$('body').on('click', "#delalist", function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

Using delegate

$('body').delegate("#delalist", 'click', function (e) { 
    e.stopImmediatePropagation();
    e.preventDefault();
    alert ('in delalist') ;
});

on() reference: http://api.jquery.com/on/ jQuery ver 1.7+

delegate() reference: http://api.jquery.com/delegate/

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
1

ID's are unique and you're reusing the "delalist" one.

j08691
  • 204,283
  • 31
  • 260
  • 272
1

You should use .live or .delegate instead of .bind for all elements that will inserted to the dom dynamically.

Using .delegate is preferred over .live as .live scans over any dom changes to bind the event. Read about .live vs .delegate.

Using .delegate - 

$(document).delegate('#thelists', 'pageinit', function () {

Using .live - 

$('#thelists').live('pageinit', function(event) {

And

Using .delegate - 

$("#thelists").delegate('#delalist', 'click', function (e) {

Using .live - 

$("#delalist").live('click', function (e) {
Community
  • 1
  • 1
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • You cannot use `live` for `pageinit`. See answer here: http://stackoverflow.com/a/937058/561731 – Naftali Jan 30 '12 at 18:43
  • 1
    Not true - http://jquerymobile.com/demos/1.0rc3/docs/api/events.html -> See under pageinit -- Also from the same post.. you should read the comment. – Selvakumar Arumugam Jan 30 '12 at 18:48
  • `.delegate` is preferred over `.live`, the jQuery Mobile team states that periodically. – Jasper Jan 30 '12 at 19:17
0

I am not exactly sure what you are trying to do here but I think I found something that might help. When I loaded your code and ran it the way it is listed I found the first button when I clicked it prompted back to the user. So I changed:

            data-role="button" id="delalist">List0:</a></li>

to read as:

            data-role="button" id="deallist">List0:

Does that help?

Jasper
  • 75,717
  • 14
  • 151
  • 146
FileasFogg
  • 93
  • 2
  • 2
  • 13