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死后会出现以下错误：

未捕获的TypeError：对象field2没有方法'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的版本彼此不兼容。

jQuery UI和jQuery.each（）

1 个答案: