jQuery点击事件前的段落标记两次

jQuery click event prepending paragraph tag twice

本文关键字:两次 段落标 事件 jQuery      更新时间:2023-09-26

我有一个点击事件,它在一个元素前两次添加了一个段落标记,我不明白为什么。有人能给我一个理由吗?jQuery

function select_menu(){
    var select = $(".select");
    var option_menu = $(".option-menu");
    var option = $(".option");
    select.on("click", function(){
        $(this).find(option_menu).toggle();
        select = $(this);
        $(this).find(option_menu).each(function(){
            $(".current").hide();
            if($(this).hasClass("current")){
                $(this).removeClass("current");
            }
            else{
                $(this).show().addClass("current");
            }
        })
    })
    option.on("click", function(){
        select.children("p").remove();
        var value = $(this).text();
        select.prepend("<p><input type='hidden' name='center' id='center' value='" +value +"' />" +value +"<p>");
    })
    $(document).on("click", function(ev){
        if($(ev.target).closest(".select").length === 0){
            $(".current").hide().removeClass("current");
        }
    })
}

这是脚本将段落标记前置到的区域。HTML

<fieldset for="center">
    <label>Center:</label>
    <div class="select" name="center_menu" id="center_menu">
        <div class="arrow"></div>
        <div class="option-menu">
            <?php
                $query = "SELECT * FROM $centers";
                $result = mysqli_query($connect, $query);
                global $center_name;
                while($row = mysqli_fetch_assoc($result)){
                    $center_name = "{$row['center']}";
                    echo "<div class='option'>" .$center_name ."</div>";
                }
           ?>
       </div>
    </div>
</fieldset>

在您的代码中:

select.prepend("<p><input type='hidden' name='center' id='center' value='" +value +"' />" +value +"<p>");

以相同的方式打开和关闭段落标记。应该有一个结束标记。

页面将其识别为两个独立的段落标记,并自动关闭它们。也许这会解决你的问题。