Question

我在点击按钮时在链接周围添加div。但是当我多次点击按钮时，它会添加多个div。

    <li>
    <label> </label>
    <div class="deletebutton">
        <label> </label>
        <div class="deletebutton">
            <label> </label>
            <div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
            </div>
        </div>
    </li>

我如何确保首先检查链接是否存在div然后添加。

我正在使用以下代码：

var parentTag = $(".ruRemove").parent().get(0).tagName;

if (parentTag == 'LI') {
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");
    $(".deletebutton").before("<label></label>");
} else {

    var par = $('.deletebutton').parent();
    if (par.is('div')) par.remove();
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");

    var prev = $('.deletebutton').prev();
    if (prev.is('label')) prev.remove();
    $('.deletebutton').before("<label></label>");
}

它应该成为这个：

  <li>
                <label> </label>
                <div class="deletebutton">
    <input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
                </div>
        </li>

当我点击按钮。点击html之前是：

  <li>             
    <input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">  
        </li>

Answer 1

以下是jsFiddle中显示的解决方案。

代码故事是

<强> HTML

<button id="myButton">My Button</button

<强>的JavaScript

$(function() {
    $("#myButton").click(function() {
        if ($(this).parent().get(0).tagName !== "DIV") {
            $(this).wrap("<div class='myDiv'>");
        }
    });
});

代码的作用是为按钮点击注册回调。单击时，我们要求单击按钮的父级，并询问父节点是否具有标记名称＆＃34; DIV＆＃34;这意味着它是<div>。如果不一个div，那么我们将按钮包装在div中并结束。在下一次调用时，父div的检测将为true，并且不会添加新的div。

Answer 2

为什么不使用例如只在第一次点击时执行所需操作的功能？

因此，只有在第一次单击该按钮时才会添加div，如果单击其他按钮，则不会执行任何操作。这样你就不会添加多个div。

要做到这一点，你可以使用例如jQuery：

<script type="text/javascript">

    $("#firstclick").one("click",function() {
        alert("This will be displayed only once.");
    });

</script>

您甚至可以检查关于一个的jQuery API文档：

http://api.jquery.com/one/

使用jquery在链接周围添加div

2 个答案: