Question

我有一个由服务器端逻辑动态构建的页面。顶部的div始终会有一个名为“ namespace1”或“ namespace2”等的类，实际上，名称空间的数量可能会继续在名称空间10或15之间。

通常，单击.myBtn事件应该做一件事，但是如果firt div的类名是'namespace5'，我需要让它做完全不同的事情

当前我拥有的代码会触发所有3个事件列表器，我该怎么做才能仅触发“ hello 5”警报？

<div class="namespace5"><!-- namespace2 is dynamically set server-side-->
    <button class="myBtn">
        Test Button 5
    </button>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $('.myBtn').on("click.namespace1.namespace2.namespace3.namespace4.namespace6", function(event){
        alert('hello not 5');
    });

    $('.myBtn').on("click.namespace5", function(event){
        alert('hello 5');
    });

    $('.myBtn').on("click", function(event){
        alert('!!');
    });
</script>

Answer 1

选择具有.myBtn类的.namespace子级。这样的事情应该起作用：

$(' .namespace5 .myBtn ').on("click", function(event){
    alert('hello 5');
});

此外，您只需检查.myBtn单击，然后使用条件即可：

$('.myBtn').on("click", function(event){
    if ($(this).parent().hasClass('.namespace1')) {
     //do whatever
    }
});

编辑：将父元素和子元素向后。

动态页面的jQuery名称空间

1 个答案: