28

私は次のHTMLを持っています：

<div class="server" id="32">
  <a>Server Name</a>
  <div class="delete-server">X</div>
</div>

serverユーザーがdivをクリックすると、編集ダイアログが表示されるようにしようとしています。問題は単純に次のことです。

 $(".server").click(function () {
     //Show edit dialog
 });

削除されたXをクリックすると、編集ダイアログが表示されるため、機能しません。serverdiv全体にdivを除くクリックイベントを持たせるにはどうすればよいですかdelete-server。

4

4 に答える 4

34 
$(".server").on('click', ':not(.delete-server)', function (e) {
     e.stopPropagation()
     // Show edit dialog
});

これがフィドルです：http://jsfiddle.net/9bzmz/3/

于 2012-04-15T07:18:34.103 に答える
25

イベントをトリガーした要素が何であるかを確認してください。

$(".server").click(function(e) {
    if (!$(e.target).hasClass('delete-server')) {
        alert('Show dialog!');
    }
});​

ライブデモ

于 2012-04-15T07:14:21.047 に答える
11

これを解決する別の方法があります。

$(".server").click(function () {
    // show edit dialog
});
$(".delete-server").click(function (event) {
    // show delete dialog for $(this).closest(".server")
    event.stopPropagation();
});

発行されたクリックイベントが.delete-server親要素にバブルアップしないことを確認してください。

于 2012-04-15T08:30:26.470 に答える
0

これだけが私にとってはうまくいきます。

js_objectのようなメタ親の jQuery オブジェクトです$('body')

jq_object.on('click', '.js-parent :not(.js-child-1, .js-child-2)', function(event) {
    //your code
});

jq_object.on('click', '.js-child-1', function(event) {
    //your code
});

jq_object.on('click', '.js-child-2', function(event) {
    //your code
});

あなたのケースの前に：

サーバー — js 親

削除サーバー — js-child-1

jq_object.on('click', '.server :not(.delete-server)', function(event) {
    //your code
});

jq_object.on('click', '.delete-server', function(event) {
    //your code
});
于 2016-11-15T12:20:05.233 に答える