A solution that does not bind the Click event binding on the DOM node added by JS and the Click event delegation under iOS fails

Problem Description:

As shown in the following code, the DOM node added by JS, in its binding fixed-point event, sometimes the Click event will not respond to the situation, according to normal understanding, JS code has blocking, the DOM node after the successful addition, you can find the node and bound events, there is no reason that event binding is not the problem, However, this situation is met many times, the cause of the problem to be further understanding, the following document the solution of the problem.

Solution:

Scenario One: The event binding is written directly on the label "<thead onclick= ' myFunction (this) ' >", where this represents the current element, is a native object, if you need to pass a jquery object as a parameter, write directly

"<thead onclick= ' myFunction ($ (this)) ' >".

At the same time, the declaration of the event function should be placed before the execution of the code, such as the common JS file introduced first.

Scenario Two: Add by event delegation, but considering that there are too many events delegated to document, it will add to the burden, so I used the program one in the process of using it.

Mui.ajax (' url ', {data:{},datatype: ' Jsonp ', type: ' Post ', timeout:10000,success:function (data) {var obj = eval (' (' +data + ') ' var result = Obj.data;var html= '; var frag=document.createdocumentfragment (); html= "<table>" + "<thead Onclick= ' myFunction (this) ' class= ' mythead ' > ' + ' <td> serial number </td> ' + ' <td> title 1</td> ' + ' <TD > Title 2</td> "+" <td> title 3</td> "+" <td> title 4</td> "+" <td> title 5</td> "+" <TD > Title 6</td> "+" <td> title 7</td> "+" </thead> "+" </table> "; frag=html; $ (' body '). Append (Frag);  $ ('. Mythead '). Click (function () {//alert (' clicked ');/});//function myFunction () {//alert (' clicked ');//}},error: function (Xhr,type,errorthrown) {mui.toast (' network exception, please try again later ');}});

If you are using scenario two, you may also encounter the problem of delegating event invalidation on iOS, and the specific problem description and solution are as follows:

Problem Description:

When you use delegation to add an event to an element, the event click is invalidated if the event is delegated to document or body on, and the element of the delegate is not clickable by default (such as div , span etc.) click

Solution: Add the following CSS properties directly to the element that needs to add the Click event

Cursor:pointer;

A solution that does not bind the Click event binding on the DOM node added by JS and the Click event delegation under iOS fails