Ajax asynchronously retrieves html data. The js method is invalid. ajaxjs

Ajax asynchronously retrieves html data. The js method is invalid. ajaxjs

The page uses js to write a method for obtaining background data.

Function data () {var tab = $ ("# dic") $. ajax ({url: '../demo. ashx? Method = getlist', data :{}, dataType: 'json', type: 'post', async: true, success: function (data) {// console. log (data); var parentStr = ''; $. each (data, function (I, item) {// console. log (item. text );
                    
ParentStr + = "<div class = 'pull-Right'> <a class = 'morechang' href = 'javascript:; 'style = 'visibility: visible; '> More + </a> </div>"

});
Tab.html (parentStr );
}
})

}

The

<A class = 'moreid' href = 'javascript:; 'style = 'visibility: visible;'> More + </a> bind a click Time

$ ('. Morechange'). click (function () {alert ("pop-up ")});

Invalid click found

It turns out that JavaScript is loaded before ajax loads the new dom, and the event is not bound to the newly loaded dom, of course.

 

Solution:

Use the delegate event of jquery to delegate this method to an existing node on the page.

$ ("# Dic"). delegate ('. morechange', 'click', function () {alert ("pop-up ");});

Solve the problem.

Of course, it is also possible to change async to false without Using async asynchronously.