Question

我看过论坛，但未能找到解决我特定问题的方法。我正在从模态弹出窗口创建一个元素。我可以让它显示在页面上但不可点击。

我在两个单独的文件中运行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();
});

Answer 1

更改

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

到

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

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

Answer 2

将事件委托给父容器

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

staticContainer是已定义click事件的元素的最近祖先。

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

Answer 3

您可能需要考虑使用委派的事件。这可以通过.on()完成，如下所示：

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

这是做什么的？

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

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

使用jquery创建的元素不可单击

3 个答案: