Question

@ResultPath(value="/pages")
@Namespace("/User")
public class WelcomeUserAction extends ActionSupport {

    @Action(value="/welcome", results={@Result(name="success", location="welcome_user.jsp")})
    public String execute(){
        return SUCCESS;
    }
}

我在popover中有2个按钮。但他们的点击事件不起作用。如何通过按钮点击触发点击事件？我的HTML代码如下。

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'auto',
        trigger: 'hover',
        html: true,
        container: $elem,
        animation: true,
        content: function () {
            var pop_dest = $(this).attr("data-pop");
            //console.log(plant);
            return $("#"+pop_dest).html();
        }
    });
});

$('#english').click(function() { // ---> THIS PART DOES NOT WORK
    alert("english");
});

$('#turkce').click(function() { // ---> THIS PART DOES NOT WORK
    console.log("turkce");
});

Answer 1

当您调用click函数时，按钮尚未添加到页面中（因为它们位于动态添加的弹出窗口中），因此您必须使用能够处理未来添加内容的内容：

$('body').on('click', '#english', function () {
    alert("english");
});

Answer 2

如果事件在执行js时不存在，你应该委托事件来确保事件得到所需的DOM元素：

$("body").on('click', '#english', function() {
    alert("english");
});

$("body").on('click', '#turkce', function() {
    alert("turkce");
});

您可以使用on方法使用jquery委派事件，其中选择器是将事件委托给子节点的父节点，firs参数是事件名称click，第二个是您希望将事件委派给#english的子项，第三个参数是处理程序。

Answer 3

popover的内容会动态附加到页面。这意味着当您尝试在页面加载时附加事件处理程序时，DOM中不存在任何按钮。要解决此问题，请使用委派的事件处理程序：

$(document).on('click', '#english', function() {
    alert("english");
}).on('click', '#turkce', function() { 
    console.log("turkce");
});

Answer 4

问题是<button>的默认类型为submit。由于您提供了自己的点击处理程序，因此您不需要该默认行为。您需要type="button"按钮。

<button id="english" type="button">English</button>

Popover click事件不起作用

4 个答案: