Question

嘿，我在一个表中有一个jQuery-UI obgects的站点。我所做的是将表保存在localstorage中，这样用户可以加载不同的“项目”。

现在我加载一个已保存的表后，我也会更新所有按钮的处理程序等。那之后工作正常。但是不再给出所有jQuery-Uis的功能。我试着在updateHandlers函数中使用代码：

//Initial setup for jQuery UI
$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

但这只适用于我表格中元素的第一个外观。所有其他人都不行。

我只是jQuery和Javascript的初学者，也许我做错了什么......但是它是什么？

我在updateHandler函数中累了其他东西：

$(this).parent().find( '.infoImg' ).tooltip();
$(this).parent().find( '.volSlider' ).slider({ max: 100, min: 0});

但现在它不适用于任何人......

HTML是：

    <img id="infoImg" src="images/info_s.png" height="30" width="30" title="What">
<div id="volSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a></div>

这段代码在我桌子的每一行都重复了。

我现在也尝试使用jQuery的.each（）函数..但没有成功：

 $('.volSlider').each(function(index, elem) {
                $(this).slider({ max: 100, min: 0});
            });

如果您需要，我很乐意发布其他信息或代码。

Answer 1

在您的第一段代码中：初始设置您按ID $('#infoImt')选择处理程序。在更新后，您使用类选择器$('.infoImg')。你不是指同一个对象。这就是为什么它不起作用的原因。

简单介绍：在添加更新后，确保所有现有元素首先删除其功能。

修改

尝试以下功能：

var initFn = function(){ $('.infoImg.__new') .tooltip() .removeClass('__new'); $('.volSlider.__new') .slider({max:100,min:0}) .removeClass('__new'); };

如您所见，我添加了一个课程：__new。这堂课是“实际的”课程。选择。这样可以确保您不会在同一元素上应用.tooltip()和.slider()两次。你也需要改变你的HTML：

<img class="infoImg __new" src="images/info_s.png" height="30" width="30" title="What" /> <div class="volSlider __new ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 18%;"></a> </div>

请注意，我已将id更改为class，并且我已添加__new课程。如果有效，请告诉我。

Answer 2

改变：

//Initial setup for jQuery UI

$( '#infoImg' ).tooltip();
$( '#volSlider' ).slider({ max: 100, min: 0});

到此：

$( '.infoImg' ).tooltip();
$( '.volSlider' ).slider({ max: 100, min: 0});

Answer 3

我是在each（）函数的帮助下完成的：

$.each($('.volSlider'), function() {
        $(this).slider({ max: 100, min: 0});
                });

Tanks @ all for your help

重新加载到页面后，jQuery-Ui失去了功能

3 个答案: