Почему $ (). Click () не работает на <li>, генерируемом pageinit? - PullRequest
Новая
       3

Почему $ (). Click () не работает на <li>, генерируемом pageinit?

4 голосов
/ 30 января 2012

Функция click работает для элемента <li>, который является частью HTML, но не для элементов <li>, загружаемых программно в pageinit. Я не могу понять, почему нет. (в этом коде есть все, что нужно для запуска) 

<!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>

Ответы [ 5 ]

4 голосов
/ 30 января 2012

Используйте устаревшую функцию live: 

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

или используйте on (jQuery> 1.7): 

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

Также я бы предложил использовать classа не id, потому что id s должен быть уникальным

1 голос
/ 30 января 2012

Вы должны использовать .live или .delegate вместо .bind для всех элементов, которые будут вставлены в dom динамически.

Использование .delegate предпочтительнее, чем .live, поскольку .live сканирует любые изменения dom, чтобы связать событие.Читайте о .live против .delegate .

Использование .delegate - 

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

Использование .live - 

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

И

Использование .delegate - 

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

Использование .live - 

$("#delalist").live('click', function (e) {
1 голос
/ 30 января 2012

ID уникальны, и вы повторно используете "delalist".

1 голос
/ 30 января 2012

Используйте on или delegate для событий для работы с динамически создаваемыми элементами.

Использование on (jQuery ver 1.7 +) 

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

Использование delegate

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

on() ссылка: http://api.jquery.com/on/ jQuery ver 1.7 +

delegate() ссылка: http://api.jquery.com/delegate/

0 голосов
/ 30 января 2012

Я не совсем уверен, что вы пытаетесь сделать здесь, но я думаю, что нашел что-то, что могло бы помочь.Когда я загрузил ваш код и запустил его так, как он указан в списке, я обнаружил, что первая кнопка, когда я нажал на нее, вызвала обратно пользователю.Поэтому я изменил: 

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

следующим образом: 

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

Помогает ли это?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...