jQuery单击事件前置段落标记两次

时间:2014-10-25 21:40:59

标签: javascript jquery

我有一个点击事件,它将一个段落标记添加到元素两次,我不明白为什么。任何人都可以给我一个理由吗? 的的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>

1 个答案:

答案 0 :(得分:0)

在您的代码中:

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

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

页面将其识别为两个单独的段落标记并自动关闭它们。这可能会解决您的问题。