在一組匹配元素中的一個元素上觸發單擊事件，而不是在匹配元素上觸發

Question

我試圖弄清楚如何找到單擊我的錨標記的時間，如何防止匹配的元素集不觸發。 這是我的 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 根據具有匹配集的元素的索引返回一個值。 我如何告訴其他元素不要開火。 發生的情況是，根據更新的 class 的錨標簽數量，將打開許多模態 windows。 我只需要一個，而不是全部

//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');
    }
});

得到了一個丑陋的解決方案，但它可以工作給模式 windows 相等的 ids

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

單擊時傳遞事件並獲取當前目標 ID。 遍歷 DOM 樹並找到 id 與此匹配的模態 window。

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

Answer 1

代替

if ($target == $target) {

嘗試

if ($target == this) {

使用您的方法，所有導致多個模式打開的鏈接都是正確的

Answer 2

你確定因為你使用的是 class $('.update-form').dialog('open'); 您沒有打開多個對話框，因為該 class 的元素不止一個？ 我在這里測試了你的代碼，它似乎工作：

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

編輯-關於您的評論，要停止傳播您應該使用stopImmediatePropagation()的事件，以了解 DOM 的哪一部分觸發您應該使用的事件，就像您所做的 event.target