Question

我有一个带有点击事件的图像地图，在其上放置标记图像：

$('#map').on('click', function(e){
    var pin = $('<div class="pin"></div>');
    $('#map_wrapper').append(pin);

然后单击该图钉将打开一个带有文本输入和保存按钮的PNotify弹出窗口，单击该按钮将输入的文本附加到包装器：

$('#map_wrapper').on('click', '.pin', function(e){
    var id = this.id;
    notice = new PNotify({
        text: form,
        ...
    });
    $('#pin_text_form [name=save]').off('click').on('click', function(e){
        $('#' + id).append('<p class="pin-text hidden">' + $.trim($('#pin_text').val()) + '</p>');
        notice.remove();

问题是，点击表单的“保存”按钮后，另一个图钉会添加到地图中，即弹出窗口的点击和地图的点击都会被触发。

我试过了：

$('#pin_text_form [name=save]').off('click').on('click', function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();

但这些都不会阻止点击主地图。

我也尝试在地图点击功能之外单击按钮，但现在保存点击仍会触发地图点击并且通知不再被删除。

我也尝试过：

$('#map_wrapper').on('click', 'pin_text_form [name=save]', function(e){
    $('#' + pin_id_clicked).append('<p class="pin-text hidden">' + $.trim($('#pin_text').val()) + '</p>');
    notice.remove();
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();

没有变化。

如何在点击保存后停止地图点击并在点击后删除通知？

Answer 1

不要级联事件处理程序。并将id存储在eventHandler之外以进行访问。

查看您的代码，看起来您总是拥有save form的一个实例，因此一个引脚ID var就足够了。

var currPinId = "";
$('#map_wrapper').on('click', '.pin', function(e){
    currPinId = this.id;
    notice = new PNotify({
        text: form,
        ...
    });]
}); //end of  event handler

$('#pin_text_form [name=save]').off('click').on('click', function(e){
    $('#' + currPinId).append('<p class="pin-text hidden">' + 

    $.trim($('#pin_text').val()) + '</p>');
    e.stopPropagation();
});

jquery stop弹出按钮单击生成其他单击

1 个答案: