Question

我是一个模态。单击我将一些元素加载到模板的内容的ul列表中。

这个函数在类＆＃34; modaldata＆＃34;上调用，对于我以后生成的元素，这个函数什么都不做，我不知道为什么？

这是主页内的功能

    $(".modaldata").on("click",function(){ 
alert("klick"); 
   var modalid = $(this)[0].getAttribute("data-modalid"); 
   var ds = $(this)[0].getAttribute("data-ds"); 
   var step = $(this)[0].getAttribute("data-step");  
   $.ajax({
         type: "POST",
         url: "'.$global['serverurl'].'/system/modalcontent.php",
         data: { modalid : modalid, ds : ds, step: step },
         success: function(result){
             var res = $.parseJSON(result);
             eval(res.js)},
         error: function(){
               alert("failure:"+res.msg);
         }
    });
});

那部分来自模态modalcontent.php 它将正确显示，但如果我点击<span class="modaldata"部分

，该功能将无法再次运行

 ... $cont.='<li class="list-group-item li_'.$e['DS'].'"> <span class="modaldata" data-id="'.$e['DS'].'" data-step="edit" data-modalid="rollenverw"><i class="fa fa-wrench"></i> '.$e['ROLE_BEZ'].'</span><span class="badge badge-success"> '.$tmp['count'].' </span>'.$tmp['del'].'</li>';
    } 
    $res['js'].='$("#ex_roles_div ul").append("'. preg_replace( '/\r|\n/', '', addslashes($cont) ).'");';

echo json_encode（$ res）;

调出函数的模态和第一次调用

<a href="#" class="modaldata" data-ds="'.$e2['DS'].'" data-modalid="changerole" data-target="#modal_changerole" data-toggle="modal">'.GloFu_get_rolename($e2['USER_HOME'],$e2['ROLE']).'</a>

Answer 1

您需要为点击添加的元素（事件委派）绑定点击不同点：

$(document).on("click", ".modaldata", function() {
  alert("klick");
  var modalid = $(this)[0].getAttribute("data-modalid");
  var ds = $(this)[0].getAttribute("data-ds");
  var step = $(this)[0].getAttribute("data-step");
  $.ajax({
    type: "POST",
    url: "'.$global['serverurl'].'/system/modalcontent.php",
    data: {
      modalid: modalid,
      ds: ds,
      step: step
    },
    success: function(result) {
      var res = $.parseJSON(result);
      eval(res.js)
    },
    error: function() {
      alert("failure:" + res.msg);
    }
  });
});

您可以详细了解 here 。

函数.on不适用于以后生成的元素

1 个答案: