jQuery UI 和 jQuery.each()

Question

这次我有一个(希望)快速的问题，尽管它已经困扰我一段时间了。

我正在尝试创建一个逐步增强的表单，以便在不启用 javascript 的情况下(或在不支持 javascript 的设备上)您仍然能够使用所有功能，但使用 javascript 会更容易/更漂亮/更直观。

作为此设置的一部分，我有以下代码:

$( ".draggable" ).each( function(){
    $(this)
    .html( $(this).attr('title') )
    .draggable({
        revert: "invalid"
    });
});

每个.draggable实际上是一个<li>元素，最初包含三个单选框，用于将字段分配给三个唯一类别之一。我使用 jQuery-UI 将这 30 组 3 个单选框替换为可拖动元素列表和 3 个可放置列表，每个列表对应三个独特类别。我不得不使用.each()方法以便正确设置 this变量，这样我就可以使用 $(this).attr('title') .

我的问题是第四行:.draggable({ 。第一个<li>元素正确地成为可拖动元素，但是在此 javascript 因以下错误而终止后:

Uncaught TypeError: Object field2 has no method 'draggable'

有什么原因导致一个元素具有该方法，但所有后续元素却没有？

编辑-

根据请求，这是我的 javascript 修改前后的 HTML...

之前:

<ul id="form-fields">
    <li class="draggable" title="field1">
        <input type="radio" name="form-field-1" value="criteria" />
        Criteria
        <input type="radio" name="form-field-1" value="entry" />
        Entry
        <input type="radio" name="form-field-1" value="default" />
        Default
    </li>
    <li class="draggable" title="field2">
        <input type="radio" name="form-field-2" value="criteria" />
        Criteria
        <input type="radio" name="form-field-2" value="entry" />
        Entry
        <input type="radio" name="form-field-2" value="default" />
        Default
    </li>
    <li class="draggable" title="field3">
        ...
    </li>
    ...
    <div style="clear:both;"></div>
</ul>
<div class="droppable no-js">
    <h4>Criteria:</h4>
    <ul id="form-field-criteria">
    </ul>
</div>
<div class="droppable no-js">
    <h4>Entries:</h4>
    <ul id="form-field-entry">
    </ul>
</div>
<div class="droppable no-js">
    <h4>Defaults:</h4>
    <ul id="form-field-default">
    </ul>
</div>
<div style="clear:both;"></div>

(请注意，no-js 类在我的 CSS 中设置为 display:none;，并且在我的 javascript 的最顶部有以下内容:$( ".no-js" ).removeClass("no-js"); )

之后:

<ul id="form-fields">
    <li class="draggable" title="field1">field1</li>
    <li class="draggable" title="field2">field2</li>
    <li class="draggable" title="field3">...</li>
    ...
    <div style="clear:both;"></div>
</ul>
<div class="droppable ">
    <h4>Criteria:</h4>
    <ul id="form-field-criteria">
    </ul>
</div>
<div class="droppable ">
    <h4>Entries:</h4>
    <ul id="form-field-entry">
    </ul>
</div>
<div class="droppable ">
    <h4>Defaults:</h4>
    <ul id="form-field-default">
    </ul>
</div>
<div style="clear:both;"></div>

因此 HTML 标记工作正常。单选框被删除并替换为字段名称(如 title 属性中所示)。然而，在我收到错误之前，只有 field1 变得可拖动。

编辑-

我确定了真正错误的根源。事实证明，field2 没有标题，所以它在 $(this).attr('title') 处感到非常困惑。线。虽然我相信这可能是 jQuery 的一个错误(没有标题应该导致 $(this).attr('title') 返回 null 或空字符串，而不是破坏我的整个脚本)，但我想找到一种方法来处理这个错误而不破坏我的整个脚本脚本。

是否会像这样简单:

if( $(this).attr('title').len > 0 ) {
    $(this).html( $(this).attr('title') );
} else {
    $(this).html('');
}

可行吗？

Answer 1

您是否尝试过这种替代方案:

$(".draggable").each(function(index, elem) {
    $(elem).html($(elem).attr('title')).draggable({
        revert: "invalid"
    });
});

您还使用哪个版本的 jQuery 和 jQuery UI？可能是您使用的 jQuery 版本和 jQuery UI 彼此不兼容。