Question

我有以下代码，可以动态地将onclick事件添加到超链接集合中：

function DisplayContent(event) {        
     alert("Showing " + event.data.classToShow);
}

$(document).ready(function () {     
    $(".modules ul li a").each(function () {
        // alert($(this).data("classname-to-show")); // alerts 'tileHelloWorld' correctly
        $(this).on("click", { classToShow: $(this).data("classname-to-show") }, DisplayContent);
    });
});

HTML

<div class="modules">
     <ul>
        <li>
            <a href="#" data-classname-to-show="tileHelloWorld">Hello</a>
        </li>
        <li>....</li>
    </ul>
</div>

这样可以正常工作，但我还想使用event.preventDefault在单击超链接后停止默认事件。搜索之后，我发现我可以将代码扩展为$(this).on("click", function (event) {，但我无法弄清楚如何将两者结合起来。

有人可以帮我利用吗？

Answer 1

在这种情况下，似乎没有任何理由将数据传递给事件处理程序，所以只需访问事件处理程序中的data-attribute，就像这样

$(document).ready(function() {
    $(".modules ul li a").on('click', function(e) {
        e.preventDefault();

        var data = $(this).data("classname-to-show");
        alert("Showing " + data);
    });
});

或者你已经这样做了，你已经有了这个活动，所以你需要的只是

function DisplayContent(event) {        
     event.preventDefault();
     alert("Showing " + event.data.classToShow);
}

将preventdefault与传递数据对象结合起来

1 个答案: