更改 <ol> 中每个 <li> 元素的点击

Question

我有一个 jQueryUI 可排序的 li-Buttons 列表，带有以下标记：

<ol id="tracks" class="ui-sortable">
<li class="pl_clipEntry ui-widget-content ui-draggable ui-draggable-handle">
    <span class="pl_slot_1_clipNumber_6">6. </span>
    <span class="pl_clipName">
        <button class="pl_entry" onclick="emitCommand('goto: clip id: 6')">Clip Copy 3.mov</button>
    </span>
    <span class="pl_clipLength">(00min17sec)</span>
</li>
</ol>

这些项目是从另一个列表中拖来的，它们的 onclick 在这里发挥了很好的作用现在每次对列表进行排序（或插入新项目）时，我都想覆盖 onclick，以便 THIS 列表中的项目具有不同的功能（实际上，它将成为一个播放列表，这就是为什么 onclick-command不能与文件列表中的相同）

我不知道该怎么做。

每次列表更新时都会调用此方法：

function updatePlaylist () {
    var list = $("#tracks");
    list.children(':not(.placeholder)').each(function(index) {
        console.log($(this).childNodes[1].text());  // to check if it works
        //$(this).children[1].attr("onclick","play_clip:" + index);
    });
};

所以，简单地说：我想将每个 li > span > button 的 onclick 设置为 "play_clip6" 等

我已经用 children[1] 和 childnodes[1] 试过了，但它们都打印未定义。

我想这与 "this" 的范围有关，或者我忽略了其他一些事情。但这不应该起作用吗？我卡住了:( 谢谢

Answer 1

我认为你缺少的是每个函数中引用元素的参数。

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 1</span>

    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 2</span>

    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 3</span>

    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;">Play 4</span>

    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});

编辑内部选择按钮

HTML

<ol id="tracks">
    <li>Track 1 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 1</button></span>

    </li>
    <li>Track 2 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 2</button></span>

    </li>
    <li>Track 3 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 3</button></span>

    </li>
    <li>Track 4 <span style="color:red;">sp1</span>  <span style="color:blue;"><button>Play 4</button></span>

    </li>
    <li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>

JS

$(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).click(function () {
            alert("before: " + $(cElem).text());
        });
    });
});
$("#changeIt").click(function () {
    $("#tracks").children(":not(.placeholder)").each(function (index, elem) {
        var cElem = $(elem).children().eq(1).children().eq(0);
        $(cElem).attr('onclick', '').unbind('click');
        $(cElem).click(function () {
            alert("after: " + $(cElem).text());
        });
    });
});

更改 <ol> 中每个 <li> 元素的点击

Changing the onclick of every <li> element in a <ol>

javascript

jquery

jquery-ui

onclick