1

我有一个名为“可关闭”的类，并试图将其添加到现有的 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。

这些选项都不起作用。

有任何想法吗？

4

7 回答 7

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

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

于 2013-08-20T11:16:04.377 回答
1

据我了解，这是动态元素和事件处理的问题。

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

由于元素是动态添加的，所以需要使用基于事件委托的事件处理，所以不是

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

你需要

$(document).on('click', '.closable', function(){
    //do something
})
于 2013-08-20T10:28:44.140 回答
1

您必须$(".element").on("click",function(){})在动态添加的元素上使用

于 2013-08-20T10:26:16.883 回答
0

type在你的情况下是一个 HTMLelement jQuery 对象，而不是一个字符串。
如果要使用字符串变量，请确保它是一个。

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');

});

关于您的后期编辑：

在处理动态生成的元素时要小心并使用http://api.jqurey/on/.on()方法委托您的事件侦听器 

$('#nonDynamicParentEl').on('click', '.dynamicEl', fn);
于 2013-08-20T10:24:07.217 回答
0

尝试

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

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

于 2013-08-20T10:24:33.210 回答
0

type 输出为“成功”或“警告”，这是一个单独的 CSS 类

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

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

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

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

$(form).on('click', '.success', function() {
    // do something
});
于 2013-08-20T10:28:03.903 回答
0

试试这个，

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()

于 2013-08-20T10:26:28.467 回答