在一组匹配元素中的一个元素上触发点击事件，而不是在匹配元素上触发答案

【问题标题】：Fire click event on one element in a set of matched elements and not on matched elements在一组匹配元素中的一个元素上触发点击事件，而不是在匹配元素上触发
【发布时间】：2011-07-06 15:40:45
【问题描述】：

我试图弄清楚如何找到单击我的锚标记的时间，如何防止匹配的元素集不触发。这是我的 Javascript：

//open the dialog box
$('.update').click(function (event) {
     var $target = event.target;
     if ($target == $target) {
    $('.update-form').dialog('open');
    console.log('yep');
     } else {
    console.log('nope');
     }

     return false;
});

这是 HTML

<tbody>
    <tr>
        <th>Designer</th>
        <th>Style</th>
        <th>Color</th>
        <th>Size</th>
        <th>Detials</th>
        <th>Notes</th>
    </tr>
    <tr style="background-color: rgb(201, 201, 201); color: rgb(255, 255, 255); ">
        <td>JASZ COUTURE</td>
        <td>4210</td>
        <td>GOLD</td>
        <td>S</td>
        <td> STRAPPY STETCH COCKTAIL</td>
        <td></td>
        <td><a href="http://localhost:8888/lexsreg/index.php/#" class="update">UPDATE</a></td>

    </tr>
    <tr>
        <td>test</td>
        <td>4as451</td>
        <td>test</td>
        <td>test</td>
        <td>tes</td>
        <td>tes</td>
        <td><a href="http://localhost:8888/lexsreg/index.php/#" class="update">UPDATE</a></td>

    </tr>
</tbody>

我知道 event.target 正在返回一个基于具有匹配集的元素的索引的值。我如何告诉其他元素不要开火。发生的情况是，根据更新类别的锚标记的数量，将打开那么多模式窗口。我只需要一个，而不是全部

//set the functions of the dialog box
$('.update-form').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    draggable: false,
    resizable: false,
    buttons: {
        'Update': function() {
            //json will happen here
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        allFields.val('').removeClass('ui-state-error');
    }
});

找到了一个丑陋但有效的解决方案给模态窗口相同的 ids

$updateForm.each(function(index) {
    $(this).attr('id', index);
});

单击时传递事件并获取当前目标 ID。遍历 DOM 树，找到 id 与 this 匹配的模态窗口。

//open the dialog box for the rows
$($btns).click(function(event) {
var target = event.currentTarget.id,
 form = $(this)
    .parent()
    .parent()
    .parent()
    .parent()
    .parent()
    .parent()
    .siblings()
    .children()
    .filter('#'+target);
    $(form).dialog('open');
    return false;
});

【问题讨论】：

我们能看到.update-form 的代码吗？如果您在每个tr 中包含该类的一个元素，则需要使用一些jQuery 选择器来获取最接近被单击的a 的实例，但我们不知道这个表单在哪里。从表面上看，这只是一个实例，但我无法理解您所说的“如何防止匹配的元素集不被触发”是什么意思。你能澄清一下吗？
@JamWaffles 是的，我也有点困惑。 @Andre Dublin 请让我知道我是否错过了答案，以便我可以编辑或删除它，如果它不正确。

标签： javascript jquery jquery-selectors jquery-events

【解决方案1】：

代替

if ($target == $target) {

试试

if ($target == this) {

使用您的方法，所有导致多个模式打开的链接都是正确的

【讨论】：

仍然有多个窗口。我知道我以前在某个地方看到过这个问题。我想过做$(this).parent().parent().siblings().children().children().stop()，但这并不优雅。
自从提出这个问题以来，我多次遇到这种情况，最后根据您的推荐@rajaasur 找到了一种优雅的方法。使用 if (this == event.currentTarget) 现在对我来说一直有效。

【解决方案2】：

你确定因为你使用的是一个类 $('.update-form').dialog('open');您没有打开多个对话框，因为该类有多个元素？我在这里测试了你的代码，它似乎工作：

http://jsfiddle.net/aMsbT/1/

编辑 - 关于您的评论，停止传播您应该使用 stopImmediatePropagation() 的事件，了解 DOM 的哪个部分触发您应该使用的事件，就像您使用 event.target 一样

【讨论】：

我知道我得到了多个元素，该类作为选择器。我要做的是隔离单击的行上的事件并阻止其他行执行事件。
要阻止事件传播，请使用 stopImmediatePropagation()。但是如果您单击一个锚点，则只会触发一个事件（正如您在小提琴中看到的那样）