Solution to invalid js method included in Ajax asynchronous retrieval of html data

On the page, js is used to write a method to obtain 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='morechange' href='javascript:;' style='visibility: visible;'> More +</a></div>"
});
        tab.html(parentStr);
      }
    })
  }

Of which

< a class='morechange' href='javascript:;' style='visibility: visible;' > More + < /a > Bind 1 click time

$('.morechange').click(function(){
  alert(" Eject ")
});

Found that the click is invalid

It turns out that js was loaded before ajax loaded the new dom, and the event was certainly not bound to the newly loaded dom

Solution:

Delegate this method to 1 node that already exists on the page using the delegate event of jquery

$("#dic").delegate('.morechange', 'click', function () { alert("弹出"); });

Problem solving.

Of course, it is also possible to change async to false without asynchronism