Question

我正在尝试更新或附加数据，就像使用提示的第一个元素的情况一样。在第一种情况下，当我在提示中单击确定它会更新，但在第二种情况下它仍然保留在日期输入标记中并且不会更新。同样适用于下拉列表，在我选择后我应该更新值

<div class="tabbable">
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <table id='table-draggable1'>
            <tbody class="connectedSortable">
                <tr>
                    <th>col1</th>
                    <th>col3</th>
                    <th>col4</th>
                </tr>
                <tr>
                    <td class="desc">256</td>
                    <td class="date">25-4-1992</td>
                    <td class="masterlist">0</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

    $(".desc").dblclick(function ()
{
    var OriginalContent = $(this).text();
    var inputNewText = prompt("Enter new content for:", OriginalContent);
    if (inputNewText != null)
    {
        $(this).text(inputNewText);
    }
});

$(".date").dblclick(function ()
{
    var inputNewText = '<input class="date" type="date"/>';
    if (inputNewText != null)
    {
        $(this).html(inputNewText);

    }

});

$(".masterlist").dblclick(function ()
{
    var OriginalContent = $(this).html();
    var inputNewText = '<select class="masterlist"><option>1</option><option>2</option></select>';
    if (inputNewText != null)
    {
        $(this).html(inputNewText);
    }

});

http://jsfiddle.net/5XyV5/

Answer 1

您正在动态更改事件所连接的元素，因此需要使用委派的事件处理程序。替换元素，即使具有相同的类/ id，也不会将事件处理程序重新连接到新的DOM元素：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/5XyV5/2/

$(document).on("dblclick",".desc", function ()
    {
        var OriginalContent = $(this).text();
        var inputNewText = prompt("Enter new content for:", OriginalContent);
        if (inputNewText != null)
        {
            $(this).text(inputNewText);
        }
    });



$(document).on("dblclick", ".date", function () {
    var inputNewText = '<input class="date" type="date"/>';
    if (inputNewText != null) {
        $(this).html(inputNewText);

    }

});

$(document).on("dblclick",".masterlist", function () {
    var OriginalContent = $(this).html();
    var inputNewText = '<select class="masterlist"><option>1</option><option>2</option></select>';
    if (inputNewText != null) {
        $(this).html(inputNewText);
    }

});

他们通过侦听命名事件来工作，冒泡到一个不变的祖先元素（本例中的文档），然后他们应用jQuery过滤器，然后他们只在匹配导致事件的元素上调用该函数。

您通常会将它们附加到最近的不变的祖先以提高效率（在您的情况下可能".connectedSortable"，但document是默认的后备（不要使用'body'进行委派body的事件由于样式考虑而导致某些事件出现问题。）

e.g。

$(".connectedSortable").on("dblclick",".desc", function ()

在选择或输入数据时，应更新该值

1 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/5XyV5/2/