單擊時添加元素並單擊刪除相同的元素

Question

我有這個代碼，它根據你點擊地圖圖像的位置動態地在jpg地圖上添加標記。 它還動態創建id。 我正在嘗試將click事件附加到每個動態創建的標記，以便在用戶單擊標記時將其刪除。 問題是，當他們點擊標記時，它會生成另一個標記。 我希望用戶能夠通過單擊地圖將標記放在地圖上，然后如果他們想要刪除標記，他們可以再次單擊它而不會在他們單擊要刪除的標記時生成新標記。

提前感謝您的幫助。

JS：

$(document).ready(function(){
    var clicks = 0;
    $("#container").click(function(e) {
        e.preventDefault();
        var x = e.pageX - 38;
        var y = e.pageY - 60;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.css('width',60);
        img.css('height',60);
        img.attr('src', 'images/location-marker1.png');
        img.attr('id', 'marker' + clicks);
        img.attr('class', 'marker' + clicks);
        img.appendTo('#container');

        $("#container").on("click", "img.marker" + clicks, function(){
            var id = $(this).attr('id');
            alert(id);
            $(this).remove();
        });
        clicks += 1;
    })
});

HTML：

<div id="container">
    <img src="images/floorplan1_fs.jpg">
</div>

Answer 1

實際上，你需要做的就是（1）使用一個公共類，比如marker ，來識別插入的標記，以及（2）將事件監聽器從外部click功能中移出，讓它獨立存在：

$("#container").on("click", "img.marker", function(e) {
    $(this).remove();
    e.stopPropagation();
});

這不僅大大簡化了您的腳本，因為#container現在將監聽所有動態添加的img.marker元素發出的點擊事件，但是使用e.stopPropagation阻止點擊事件冒泡到父級，從而導致新的子級單擊以刪除一個時添加。

這是一個概念驗證示例，對您的基本代碼進行了一些小的更改：

1. 不再需要跟蹤唯一ID
2. 在這里，我們利用了jQuery帶來的驚人鏈接功能

 $(document).ready(function() { $("#container").click(function(e) { e.preventDefault(); var x = e.pageX - 38, y = e.pageY - 60, $img = $('<img>'); $img .css({ top: y, left: x, width: 60, height: 60 }) .attr({ src: 'https://placehold.it/60x60' }) .addClass('marker') .appendTo('#container'); }); $("#container").on("click", "img.marker", function(e) { $(this).remove(); e.stopPropagation(); }); }); 

 #container { position: relative; } #container .marker { box-shadow: 0 0 10px 10px rgba(0, 0, 0, .5); position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <img src="https://placehold.it/500x500"> </div> 

Answer 2

只需使用通用類附加事件並將其置於其他click事件之外：

$(document).ready(function(){
    var clicks = 0;
    $("#container").click(function(e) {
        e.preventDefault();
        var x = e.pageX - 38;
        var y = e.pageY - 60;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.css('width',60);
        img.css('height',60);
        img.attr('src', 'images/location-marker1.png');
        img.attr('id', 'marker' + clicks);
        img.attr('class', 'marker');
        img.appendTo('#container');

        clicks += 1;
    })
    $("#container").on("click", "img.marker", function(){
      var id = $(this).attr('id');
      alert(id);
      $(this).remove();
      e.stopPropagation();
    });
});

注意：如果您想改進可以使用的代碼：

$('<img />', {  
    'class' : "marker",
    src     : 'images/location-marker1.png',
    css     : {
        top    : y,  
        left   : x, 
        width  : 60, 
        height : 60, 
    },
    on : {
        click: function() {
             $(this).remove();
        }
    }
}).appendTo('#container');

希望這可以幫助。

 $(document).ready(function(){ $("#container").click(function(e) { e.preventDefault(); $('<img />', { 'class' : 'marker', src : 'https://www.gobages.com/wp-content/uploads/2015/09/marker-reservoirs.png', css : { top : e.pageY - 37, left : e.pageX - 24, width : 30, height : 30, }, on : { click: function(e) { e.stopPropagation(); $(this).remove(); } } }).appendTo('#container'); }); }); 

 #container { position: relative; } #container .marker { position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <img src="http://geology.com/world/world-map-clickable.gif"> </div>