1

我查看了论坛，但无法找到解决我的具体问题的方法。我正在从模式弹出窗口创建一个元素。我可以让它显示在页面上，但它不可点击。

我在两个单独的文件中运行 jquery 代码，以便能够为应用程序做我需要的事情。

发生的事情是我有一个“编辑”图标，该图标在加载时加载到每个元素上。这很好用，当您单击它时，它会创建模态框并加载“第 2 页”。里面的所有功能都可以正常工作。当用户单击“更新”时，该框关闭并从“第 1 页”触发“append_elements”功能并加载新图标。但是，刚刚添加的这个编辑图标没有点击。

我曾尝试在各个地方使用 on() ，但没有任何运气让它工作。

谢谢埃里克

第 1 页：

$(document).ready(function(){ 
  append_elements();

  $('.cms_edit').on('click', function(){
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask_temp').css({'width':maskWidth,'height':maskHeight});
    $('#mask_temp').fadeIn(1000); 

    var winH = $(window).height();
    var winW = $(window).width();

    var content_object = { 'content' : $(this).parent().html(), 'item_id' :  $(this).parent().data("item") }

    $('#modal_temp').load('/content-edit.php', content_object);

    $('#modal_temp').css('top',  winH/2-$("#modal_temp").height()/2);
    $('#modal_temp').css('left', winW/2-$("#modal_temp").width()/2);      

    $('#modal_temp').fadeIn(500);
  });
});

function append_elements()
{
    $('.cms_edit').appendTo('.editable').show();
}

第2页：

$('#update').click(function(){
    var value = CKEDITOR.instances['page_text'].getData();
    var item = $('#prev_id').val();

    var elem = '<div class="cms_edit"><em class="icon-edit"></em></div>';

    $('#item_' + item , parent.document).html(value);

    $('#modal_temp', parent.document).fadeOut(500);
    $('#mask_temp', parent.document).fadeOut(500);

    parent.append_elements();
});
4

3 回答 3

1

改变

$('.cms_edit').on('click', function(){

至

$('.editable').on('click', '.cms_edit', function(){

jQuery 集合接收事件，然后将其委托给与作为参数给出的选择器匹配的元素。这意味着与使用 live 时相反，执行代码时 jQuery set 元素必须存在。

于 2013-06-10T20:02:27.457 回答
1

将事件委托给父容器

$(staticContainer).on('click', '.cms_edit', function(){

staticContainer 是元素的最接近的祖先，单击事件已定义到该元素。

确保在绑定事件时选择页面上已经存在的容器。

于 2013-06-10T20:02:51.877 回答
0

您可能需要考虑使用委托事件。这可以这样做.on()：

$(document).on('click', '.cms-edit', function(){ ... });

这是做什么的？

上面的代码委托事件处理程序。通过将事件处理程序附加到静态元素或已存在的元素，例如document将元素附加到的父级或父级，它将事件委托给所有当前节点和动态添加的与选择器匹配的未来节点。这在涉及 AJAX 加载的内容时特别有用。

有关详细信息，请参阅此链接：.on()。

于 2013-06-10T20:06:12.993 回答