dpvm7231 2019-03-14 16:33
浏览 125
已采纳

使用.innerHTML更新数组,在删除/添加时发出问题

Trying to get my array to update onto the front end dynamically, when a user either adds/removes an item.

HTML/PHP for frontend below:

<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>

So far, I set my array

var pills = ["test","test2"];

Then setup a function which loops through this array and echos out a div, with the array item and a close icon

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;
}

then call this function on load

looparray();

Then I have an onclick, for the radio buttons (Front end). Which will add to the array or remove depending if the checkbox is checked

$('.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();

});

And then an on close, to remove the selected from the array.

//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();

});

now the issue is, when I first select a remove, it will run fine. If i then add an item, then try to remove via the .tag exit, it doesn't run the function. I've narrowed it down to the looparray(); causing the issue, but can't see what the issue is. All i can think is it's wiping the data and re-adding, which may cause an issue with pre-defined functions?

I've put a little codepen together to give a better understanding. https://codepen.io/anon/pen/QoQrZw

  • 写回答

1条回答 默认 最新

  • dte49889 2019-03-14 17:02
    关注

    As @avraham said, this was due to the element not in the DOM.

    Fixed by adding:

    //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();
    
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题