Question

我有一个名为'closable'的类，并尝试将其添加到现有的div中。目前它似乎完全忽略了它。：（

$(type).addClass('closable');
jQuery(form).append('<div class="'+type+'">'+data.msg+'</div>');

HTML输出：实际上没有显示。

我也尝试过：

jQuery(form).append('<div class="'+ type +' closable">'+data.msg+'</div>');

HTML输出：

<div class="warning closable">No data given</div>

这看起来像它给它的类，但它实际上并没有触发与它相关的JS。

这些选项都不起作用。

有什么想法吗？

Answer 1

$(document).on('click','.close_img', function(){
        $(this).parent().fadeOut(600).remove();
    });

这是让它发挥作用的魔力。

Answer 2

您必须对动态添加的元素

使用$(".element").on("click",function(){})

Answer 3

据我所知，动态元素和事件处理存在问题。

您的代码jQuery(form).append('<div class="'+ type +' closable">'+data.msg+'</div>');看起来不错，但问题似乎与关联的js代码有关

由于元素是动态添加的，因此您需要使用基于事件委派的事件处理，而不是

$('.closable').click(function(){
    //do something
})

你需要

$(document).on('click', '.closable', function(){
    //do something
})

Answer 4

在您的情况下，

type是一个HTMLelement jQuery对象，而不是String。
如果你想使用一个字符串变量，那就确保它是一个。

jQuery(function( $ ){ // DOM is now ready

    var type = 'warning'; // warning // success //
    var form = $('#form');
    var data = {msg:"hello!"};

    $(form).append('<div class="'+ type +'">'+ data.msg +'</div>');
    $('.'+ type).addClass('closable');

});

关于您的后期修改：

在处理动态生成的元素时要小心，并使用.on()方法_{http://api.jqurey/on/}

委托您的事件监听器

$('#nonDynamicParentEl').on('click', '.dynamicEl', fn);

Answer 5

试

jQuery(form)
    .append('<div>'+data.msg+'</div>')
    .children().last()
    .addClass('closable')
;

或使用cars10的简单解决方案（目前在评论中）。

Answer 6

试试这个，

jQuery(function(){
    //other variables like form etc
    var type = 'warning';
    jQuery(form).append('<div class="'+type+'">'+data.msg+'</div>');

    // use . for class selectors and add below line after adding it in form
    jQuery('.'+type).addClass('closable');

    jQuery(document).on('click','.'+type,function(){
        //your code for type class
    });

});

要使用动态创建的元素，请使用on()

Answer 7

type输出为'success'或'warning'，它是一个单独的CSS类

鉴于type是一个字符串，您在第二个示例中的内容将起作用：

jQuery(form).append('<div class="' + type + '">' + data.msg + '</div>');

这看起来像它给它的类，但它实际上并没有触发与它相关的JS。

我假设您的意思是事件未附加到动态附加元素。这是因为事件附加在页面的加载上，因此您需要使用委托的事件处理程序。试试这个：

$(form).on('click', '.success', function() {
    // do something
});

jQuery附加第二类

7 个答案: