Question

对于网页上的每个复选框，我将其替换为我从jsfiddle.net/gnQUe/170借用的滑块/

这是通过在加载文档时浏览元素来完成的。

现在的问题是，当通过ajax加载更多内容时，新的复选框不会被转换。

为了解决这个问题，我使用AjaxComplete事件再次遍历所有元素并用滑块替换复选框。现在问题发生在已经被替换的元素上，得到两个滑块。为了避免这种情况，我检查复选框是否隐藏，下一个元素是类“slider-frame”的div，然后不处理重新处理元素。

但我也有很多其他类似的控件，我认为我不是唯一有这个问题的人。还有另一种简单的方法吗？

存在jQuery live / on（http://api.jquery.com/on/）事件，但它需要一个事件作为参数？而我想在渲染时改变控件的外观。

同一问题的另一个例子是使用jQuerys自动完成插件扩展一些通过ajax加载的控件。

除了更改元素的某些属性之外，还有更好的方法来实现此目的。

总结一下，在文档加载中我想处理DOM中的每个元素，但是当通过ajax加载更多元素时，我想只更改新元素。

Answer 1

我认为当元素转换为滑块时，会向它们添加一个类。所以只需添加一个not子句。

$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});

所以在您的代码中执行类似这样的操作

$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
    $(this).addClass('on').html('YES');
    $('#slider').val(true);
},function(){
    $(this).removeClass('on').html('NO');
    $('#slider').val(false);
});

由于您说您不想添加任何其他内容，因此您可以将切换功能更改为单击。

$(document).on("click", ".slider-button", function(){
   var elem = $(this);
   elem.toggleClass("on");
   var state = elem.hasClass("on");
   elem.text(state?"YES":"NO");
   elem.parent().next().val(state);    
});

跑步小提琴：http://jsfiddle.net/d9uFs/

使用jQuery更改，只使用通过ajax加载的元素

1 个答案: