javascript - on 无法识别添加的链接元素

Question

我正在创建一个以 Google Maps Javascript API 为中心的应用程序，并且正在使用 infobox 插件。

创建信息框的函数的代码:

var ibOptions = {
    disableAutoPan: false,
    zIndex: null,
    infoBoxClearance: new google.maps.Size(1, 1),
    pixelOffset: new google.maps.Size(-85, -290),
    isHidden: false,
    pane: "floatPane",
    enableEventPropogation: true
};


let marker = new google.maps.Marker({
    icon: icon,
    map: map,
    draggable: true,
    position: new google.maps.LatLng(latlng.lat, latlng.lng),
    visible: true
});

boxText.innerHTML = "<input type='text' id='user' placeholder='Add User' />"
                    + "<a href='#' class='adduser'>Add User</a>";
ibOptions.content = boxText;

let ib = new InfoBox(ibOptions);

ib.open(map, marker);

然后在另一个函数中，我 try catch 信息框中按钮的点击，但什么也没有发生。控制台中没有错误，也没有警报。我可以在 adduser 函数中记录一些琐碎的消息，这样我就知道其他一切都正常工作，并且我确实确保导入了 jQuery。

export function addUser() {
    $("document").on("click", ".adduser", function () {
        alert('hello world!');
    });
};

我有另一个函数调用 jquery ui 自动完成小部件，它工作得很好:

$("#user").autocomplete({
    source: userArray
});

Answer 1

1. $(document)，而不是 $('document') - 尽管这可能不会导致问题 - #2 是。
2. 这假设按钮在页面加载时位于 DOM 中。$("文档").on("点击", ".adduser", function () { 警报(' Hello World !')；});

如果我正确地阅读了您的标记和脚本，则事实并非如此。因此，您无法使用该方法在页面加载后绑定(bind)单击事件。您将需要使用委派。

$('#yourButtonWrapper').delegate('.adduser', 'click', function() { 
  alert('hello world!');
});