Javascript 使用.innerHTML更新数组，删除/添加时出现问题

当用户添加/删除项目时，尝试使我的数组动态更新到前端

用于前端的HTML/PHP如下所示：

<div class="row">
    <div class="col-12">

        <div class="custom--css_pills">
            <span class="tag filtering">Edit Products</span>
            <span id="pills--container"></span>
        </div>

        <?php 

            $items = get_posts( array (  
                'post_type'         =>  array('products'),
                'posts_per_page' => -1  
            )); 
            echo '<div class="enquire--surround_div">';
            foreach($items as $item) {
                echo '<input class="enquiry--add_chk" type="checkbox" value="'.$item->post_title.'" id="'.$item->post_title.'" />  
                <label for="'.$item->post_title.'">'.$item->post_title.'</label>';  
            }
            echo '</div>';

        ?>

    </div>
</div>

然后设置一个函数，该函数在该数组中循环，并用数组项和关闭图标回显一个div

function looparray(){

var str = '';

pills.forEach(function(pill) {
        str += '<div class="tag">'
        str += '<span>' + pill + '</span>';
        str += '<span class="tag-exit"></span>';
        str += '</div>';
}); 

// Echo
    document.getElementById("pills--container").innerHTML = str;
}

然后我有一个onclick，用于单选按钮（前端）。如果选中该复选框，则会将其添加到阵列或删除

$('.enquiry--add_chk').click(function(){

    $valuetoaddcolour = $(this).next();
    $valuetoaddcolour.toggleClass('enquiry--tabs_colour')

    $valuetoadd = $(this).next().text();

    if ( $(this).is(':checked')) {
        console.log('notfilled');
        pills.push($valuetoadd);
        console.log(pills);
    }
    else{
        pills.splice( $.inArray($valuetoadd, pills), 1 );
        console.log(pills);   
    }

    looparray();

});

然后打开关闭，以从阵列中删除选定的

//On close..
$('.tag-exit').click(function() {

    $valuetoremove = $(this).parent(); // Get parent to hide (surround div)
    $valuetoremovetext = $(this).parent().text(); // Get text to remove from array

    // remove from array
    pills.splice( $.inArray($valuetoremovetext, pills), 1 );
    $valuetoremove.hide(); // Hide the pill

    looparray();

});

现在的问题是，当我第一次选择删除时，它将正常运行。如果我随后添加了一个项，然后尝试通过.tag退出删除，则它不会运行该函数。我已经把它缩小到looparray（）；导致问题，但看不到问题是什么。我所能想到的就是它正在擦除数据并重新添加，这可能会导致预定义函数出现问题

我把一个小代码笔放在一起，以便更好地理解。

---

正如@avraham所说，这是由于DOM中没有元素

修正加入：

//On close..
$('body').on('click', '.tag-exit', function () {

// $('.tag-exit').click(function() {

    $valuetoremove = $(this).parent(); // Get parent to hide (surround div)
    $valuetoremovetext = $(this).parent().text(); // Get text to remove from array

    // remove from array
    pills.splice( $.inArray($valuetoremovetext, pills), 1 );
    $valuetoremove.hide(); // Hide the pill

    looparray();

});

---

正如@avraham所说，这是由于DOM中没有元素

修正加入：

//On close..
$('body').on('click', '.tag-exit', function () {

// $('.tag-exit').click(function() {

    $valuetoremove = $(this).parent(); // Get parent to hide (surround div)
    $valuetoremovetext = $(this).parent().text(); // Get text to remove from array

    // remove from array
    pills.splice( $.inArray($valuetoremovetext, pills), 1 );
    $valuetoremove.hide(); // Hide the pill

    looparray();

});

---

这是因为当您第一次为

.tagexit

添加侦听器时，新元素还不在DOM中。您需要在每次向DOM添加新元素时附加侦听器。如果您是正确的！这是因为当您第一次为

.tagexit

添加侦听器时，新元素还不在DOM中。您需要在每次向DOM添加新元素时附加侦听器。如果您是正确的！仅供参考，唯一的更改是添加$（'body'）。在（'click'，'.tag exit'，function（）{而不是$（'.tag exit'）。单击（function（）{仅供参考，唯一的更改是添加$（'body'）。在（'click'，'.tag exit'，function（）{而不是$（'.tag exit'）。单击（function（））{

//On close..
$('body').on('click', '.tag-exit', function () {

// $('.tag-exit').click(function() {

    $valuetoremove = $(this).parent(); // Get parent to hide (surround div)
    $valuetoremovetext = $(this).parent().text(); // Get text to remove from array

    // remove from array
    pills.splice( $.inArray($valuetoremovetext, pills), 1 );
    $valuetoremove.hide(); // Hide the pill

    looparray();

});