jQuery UI 拖放导致绑定(bind)点击触发

Question

我有一个使用 jQuery UI 的项目 UL，我有拖放功能。但是，我还需要能够单击列表中的一项并触发一个小例程，在其中一个“li”上方添加标题行。问题在于点击拖放。我尝试使用跨度将点击绑定(bind)到 li 的特定区域，但随后我丢失了 li 的索引。这是我的代码，任何建议将不胜感激:

<script type="text/javascript">
 $(function() {
        var item_positions = $('#ml_organize').sortable('toArray');
  $('#ml_organize').sortable({
      placeholder: 'ui-state-highlight',
            cursor: 'pointer'
  });
  $('#ml_organize').disableSelection();
        $('#org_submit').click(function() {
            var item_positions = $('#ml_organize').sortable('toArray');
        });
        $('#ml_organize li').bind('click', function() {
            var rowNo = $(this).index();
            var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'icon ui-icon ui-icon-minusthick\' title=\'Remove header line\' alt=\'Remove header line\' onClick=\'removeMLRow(" + rowNo + ");\'></span><span class=\'note\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>";
            //alert(rowNo);
            $('#ml_organize li').eq(rowNo).before(newRow);
            $('#hl_text' + rowNo + '').focus(function() {
                $(this).css('background','#DDD');
            });
            $('#hl_text' + rowNo + '').blur(function() {
                $(this).css('background','#FFF');
            });
            $('#hl_text' + rowNo + '').focus();
            // renumber rows after insert
            $('#ml_organize li').slice(rowNo - 1).each(function() {
                var newID = 'li' + ($(this).index() + 1);
                $(this).attr('id',newID);
            });
            var item_positions = $('#ml_organize').sortable('toArray');
            // alert(item_positions);
        });
 });
    function removeMLRow(rowNo) {
        $('#ml_organize li').eq(rowNo).remove();
        // renumber rows after remove
        $('#ml_organize li').slice(rowNo).each(function() {
            var newID = 'li' + ($(this).index() + 1);
            $(this).attr('id',newID);
        });
        var item_positions = $('#ml_organize').sortable('toArray');
        //alert(item_positions);
    }
    $('#org_submit').button();
</script>

这是它需要操作的 UL:

<ul id="ml_organize">
   <li id="li1" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li>
    <li id="li2" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li>
    <li id="li3" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li>
    <li id="li4" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li>
    <li id="li5" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">4</span><span class="org_partno">ISS888</span><span class="org_desc">INSUL STRIP FOR BAYS-42" LONG</span></li>
    <li id="li6" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li>
    <li id="li7" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li>
    <li id="li8" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X  24.0"</span></li>
    <li id="li9" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li>
    <li id="li10" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li>
    <li id="li11" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li>
    <li id="li12" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li>
    <li id="li13" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">SPT6224</span><span class="org_desc">SPLIT TUBE 5/8" X 24" GRAY</span></li>
    <li id="li14" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li>
    <li id="li15" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">T1523-0031-200</span><span class="org_desc">28 PR/24AWG SHLD, AMP 64-PIN FEMALE CONN</span></li>
</ul>

Answer 1

看看下面的方法是否可以解决问题。

请注意，我也尝试稍微清理一下代码，但它仍然可以简单得多。您不需要每个 LI 的所有单独 ID，因为您正在使用 index() ——我从 JS 中删除了它们。

其他几点:

• 如果最终会出现数百或数千个 LI，则应使用事件委托(delegate)而不是绑定(bind)到点击(无论如何，事件委托(delegate)可能会进一步简化此代码)。
• 对于处理点击的元素，通常使用它比使用 .然后你至少可以让他们为没有 JavaScript 的人做一些事情。

var mlo, item_positions, numAdded;
var disableAdd = false;
$(function() {
    mlo = $('#ml_organize');
    mlo
        .sortable({
            placeholder: 'ui-state-highlight',
            cursor: 'pointer',
            start: function() {
                disableAdd = true;
            },
            stop: function() {
                setTimeout('disableAdd = false', 1000);
            }
        })
        .disableSelection();
        .find('li')
            .click(addMlRow);

    item_positions = mlo.sortable('toArray');

    $('#org_submit')
        .click(function() {
            item_positions = mlo.sortable('toArray');
        })
        .button();
});

function addMlRow() {
    if(disableAdd) return false;
    var that = $(this);
    var rowNo = that.index();
    numAdded++;
    $('<li id="new' + numAdded + '" class="ui-state-default"><span class="icon ui-icon ui-icon-minusthick" title="Remove header line"></span><span class="note">HL</span><input class="header_line" maxlength="75" type="text" name="hl_text[' + rowNo + ']" id="hl_text' + rowNo + '" /></li>')
        .insertBefore(that)
        .find('span.ui-icon-minusthick')
            .click(function() {
                $(this).parent().remove();
                item_positions = mlo.sortable('toArray');
            })
        .end()

        .find('input')
            .focus(function() {
                $(this).css('background','#DDD');
            })
            .blur(function() {
                $(this).css('background','#FFF');
            })
            .focus();

    item_positions = mlo.sortable('toArray');
}