0

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

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

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

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

但我也有很多其他这样的控件，我想我不是唯一一个有这个问题的人。还有其他简单的方法吗？

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

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

除了更改元素上的某些属性之外，是否有更好的方法来完成此操作。

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

4

1 回答 1

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/

于 2012-10-24T13:03:46.983 回答