选择框与 .mouseup 一起使用返回 false 问题

Question

我正在关注本教程：

http:// /www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html

我的补充是大部分内容是ajax/json/dynamic。我添加了一个选择框，它也是动态填充的。当我尝试在选择下拉列表中选择某些内容时，它会自动关闭。我认为由于这个原因：

$(".editbox").mouseup(function(){
    return false
});

我尝试对此使用一些变体：

$('input[type=select]').click(function(event){event.stopPropagation()});

但我比我目前的理解所允许的更深入了兔子洞。 任何建议将不胜感激。

Answer 1

您可以通过使用 if 语句将代码包装在 tr 的 click 事件中来解决此问题，该 if 语句检查实际单击了哪个元素。这将导致您的代码仅在用户直接单击具有适当类的 或 时隐藏/显示输入。这将允许您摆脱“.editbox”mouseup 事件处理程序。

jsFiddle （小提琴中的第一行显示一个选择框，而不是仅两个输入，因此您可以看到这段代码有效。ajax 调用也在小提琴中进行了注释。）

$(document).ready(function() {
    $(".edit_tr").click(function(e) {
        if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
            var ID = $(this).attr('id');
            $("#first_" + ID).hide();
            $("#last_" + ID).hide();
            $("#first_input_" + ID).show();
            $("#last_input_" + ID).show();
        }
    }).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />'); // Loading image
        if (first.length > 0 && last.length > 0) {

            $.ajax({
                type: "POST",
                url: "table_edit_ajax.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#first_" + ID).html(first);
                    $("#last_" + ID).html(last);
                }
            });
        }
        else {
            alert('Enter something.');
        }

    });

    // Outside click action
    $(document).mouseup(function(e) {
        if (!$(e.target).hasClass('editbox')) {
            $(".editbox").hide();
            $(".text").show();
        }
    });

});

上面的相关代码是：

$(".edit_tr").click(function(e) {
    if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
    }
})

不要忘记删除此代码：

$(".editbox").mouseup(function() {
    return false
});

编辑： 您需要在 ' 中执行类似的操作文档'点击处理程序。除了此处之外，如果目标具有“editbox”类，您将忽略点击。

// Outside click action
$(document).mouseup(function(e) {
    if (!$(e.target).hasClass('editbox')) {
        $(".editbox").hide();
        $(".text").show();
    }
});