All geek questions in one place

Why the function $ () does not work. Click () on <li> generated using pageinit?

The click function works for the <li> element, which is part of the HTML, but not for the <li> elements loaded programmatically on pageinit. I can’t understand why not. (this code has everything 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>
+4
source share
5 answers

Use 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') ; });

I would also suggest using class , not id , because id must be unique

+4
source

Use on or delegate for events to work with dynamically generated 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() link: http://api.jquery.com/on/ jQuery ver 1.7 +

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

+1
source

Identifiers are unique and you reuse "delalist".

+1
source

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

Using .delegate is preferable to .live, because .live scans 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) {
+1
source

I'm not quite sure what you are trying to do here, but I think I found something that could help. When I downloaded your code and ran it as it was listed, I found the first button when I clicked it and asked to return to the user. So I changed:

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

read as:

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

Does it help?

0
source

Source: https://habr.com/ru/post/1393828/

More articles:


All Articles