Question

我有一个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
        }
    });

});

Answer 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
    }
});

- 编辑 - 尝试此操作以获取正确的元素...

$('.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
    }
});

Answer 2

试试这个：

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。

找到具有特定类的前一个元素

2 个答案: