0

我有一个 jQuery 对话框，允许用户添加和删除投票选项（使用 jQuery 更新 DOM）。每次添加选项时，都会以以下格式将输入和按钮（“删除”）添加到对话框中 -

<div id="existing-options">
    <div class="dialog-option">
        <div class="dialog-right">
            <div class="remove_option button-secondary" id="remove_new_0">Delete</div>
        </div>
        <div class="dialog-left">
            <input type="text" value="1" class="option text ui-widget-content ui-corner-all" id="new_0" name="new_0">
        </div>
    </div>
</div>

我正在努力做到这一点，如果用户在专注于输入时按下回车，click则会触发它对应的“删除”按钮的事件。

我做了一些研究，.sibling()似乎不合适。.prev()似乎是我最好的选择，但这不起作用。有人可以告诉我让这个工作的最佳方法吗？

$(document).ready(function(){

    dialog_options_container = $('#existing-options'); // The container which holds the option inputs/buttons

    /** Capture the 'enter' key when removing an option */
    dialog_options_container.bind('keyup', '.option', function(e){
        if(e.keyCode === 13){
        $(this).prev('.remove_option').click();
        return false; // Ignore the default event
        }
    });

});
4

2 回答 2

1

您可以尝试id专门针对按钮（假设示例中的 0 随每个新部分递增）：

t.dialog_options_container.bind('keyup', '.option', function(e){
    if(e.keyCode === 13){
        var button_id = $(this).attr('id');
        $('#remove_' + button_id).trigger('click');
        return false; // Ignore the default event
    }
});

--edit--试试这个以获得正确的元素...

$('.dialog-left input[type="text"]').bind('keyup', function(e){
    if(e.keyCode === 13){
        var button_id = $(this).attr('id');
        $('#remove_' + button_id).trigger('click');
        return false; // Ignore the default event
    }
});
于 2013-10-13T22:31:09.353 回答
1

尝试这个：

t.dialog_options_container = $('#existing-options');
t.dialog_options_container.on('keyup', '.option', function(e){
    if(e.keyCode === 13) $(this).closest('.dialog-option').find('.remove_option').click();
    return false;
});

它用于.closest()选择.dialog-option然后.find()搜索.remove_option。

于 2013-10-13T23:21:36.880 回答