查找单击了哪个框(或输入按键)

<div id="boxes">
    <div class="container e_type1" data-custom-data="e_type1">
        <div class="header"><h2>E Type 1</h2></div>
        <div class="image"></div>
        <div class="footer">
            <input type="text" name="item_level" value="1" class="item_level" min="1" step="1" required>
        </div>
    </div>
    <div class="container e_type2" data-custom-data="e_type2">
        <div class="header"><h2>E Type 2</h2></div>
        <div class="image"></div>
        <div class="footer">
            <input type="text" name="item_level" value="1" class="item_level" min="1" step="1" required>
        </div>
    </div>
</div>
<div id="dialog" title="Progress">
    <p>
        <div id="progressbar">
            <div class="progress-label"></div>
        </div>
    </p>
    <div id="message"></div>
</div>

// Image container was clicked.
//  Get data and send first Ajax request.
$(".image").click(function () {
    //console.log("Let's Start! Image container was clicked");
    $("#dialog").dialog("open");
    var e_type_var = $(".container").data("custom-data"),
        item_level_var = $(this).$("#item_level").val();
        alert(e_type_var + " was clicked");
    forgeAjax(e_type_var, item_level_var, 'first_req', function (error) {
        // By default, show Cancel button.
        $("#dialog").dialog({
            buttons: [{
                text: "Close",
                click: function () {
                    $(this).dialog("close");
                }
            }]
        });
        // Focus Cancel button
        $('.ui-dialog button:eq(1)').focus();
        // If there's no error returned, show Cancel and Button2 buttons.
        if (!error) {
            $("#dialog").dialog({
                buttons: {
                    'Cancel': function () {
                        $(this).dialog('close');
                    },
                        'Button2': function () {
                        $("#message").html("");
                        startProgressBar(e_type_var, item_level_var);
                    }
                }
            });
            // Focus Button2.
            $('.ui-dialog button:eq(2)').focus();
        }
    });
});

三个问题及其解决方案:

• id应该是唯一的。您将相同的ID #item_level应用于多个元素。但是你已经应用了类似的class应用于他们，我们将使用它，并从HTML中删除额外的ID属性。
• 您的keypress事件需要一种方法来告诉哪个字段触发了事件。我们通过使用jQuery的 .index() 方法来实现。
• 您的click事件还需要一种方法来识别两个图像中的哪一个被点击。再次，.index()在这里有所帮助。但是，我们还使用了一个名为 .eq() 的方法，将之前获取的index提供给该方法。我希望我说的有意义。

看看这个jsFiddle，告诉我它是否有帮助。

JavaScript:

$('.image').click(function () {
    $('#dialog').dialog('open');
    var e_type_var = $(this).parent().data('custom-data'),
        item_level_var = $(this).siblings('.footer').find('.item_level').val();
    forgeAjax(e_type_var, item_level_var, 'first_req', function (error) {
        $('#dialog').dialog({
            buttons: [{
                text: 'Close',
                click: function () {
                    $(this).dialog('close');
                }
            }]
        });
        $('.ui-dialog button:eq(1)').focus();
        if (!error) {
            $('#dialog').dialog({
                buttons: {
                    'Cancel': function () {
                        $(this).dialog('close');
                    },
                        'Button2': function () {
                        $('#message').html('');
                        startProgressBar(e_type_var, item_level_var);
                    }
                }
            });
            $('.ui-dialog button:eq(2)').focus();
        }
    });
});
$('.item_level').keypress(function (e) {
    if (e.which == 13) {
        $('.image').eq($('.item_level').index(this)).click();
    }
});

您可以更改

$(".image").click(function () {
    //console.log("Let's Start! Image container was clicked");
    $("#dialog").dialog("open");
    var e_type_var = $(".container").data("custom-data"),

$(".image").click(function (e) {
    //console.log("Let's Start! Image container was clicked");
    $("#dialog").dialog("open");
    var e_type_var = $(e.target).closest('.container').data("custom-data"),

$(e.target)是产生事件的元素(记住在事件函数中传递e)

用这个选择器搜索最接近的父节点。

https://api.jquery.com/closest/

对于按键，您可以像aznbanana9所说的那样使用类名，并且使用相同的策略

$('.item_level').keypress(function (e) {
    // Enter was pressed while in the input box.
    if (e.which == 13) {
        // Send .image container click.
        $(e.target).closest('.container').find('.image').click();

无需更改代码，可能在这里我直接调用函数

我更新代码http://jsfiddle.net/qjs7c86v/71/

您的JSFiddle有这个:

$('#item_level').keypress(function (e) {
      // Enter was pressed while in the input box.
      if (e.which == 13) {
          // Send .image container click.
          $('.image').click();
      }
});

表示根据id选择元素。但是您的输入具有相同的id字段，它们应该是唯一的:

<input type="text" name="item_level1" value="1" id="item_level" class="item_level" min="1" step="1" required>

和

<input type="text" name="item_level2" value="1" id="item_level" class="item_level" min="1" step="1" required>

所以，你可以添加另一个$('#item_level').keypress(function ...或只是改变你的选择器，以查找类与相同的名称:

$('.item_level').keypress(function (e) {
      // Enter was pressed while in the input box.
      if (e.which == 13) {
          // Send .image container click.
          $('.image').click();
      }
});

---

更多关于jQuery选择器的信息:http://www.w3schools.com/jquery/jquery_selectors.asp