Question

I have done the following code in php so that I can click on the arrow and a form opens below

    echo '<div class="editor" id="'.$par_code.'" style=" background-color: #fdfdfd; padding:14px 25px 30px 20px; font-family: Lucida Console, Monaco, monospace; box-shadow: 0 1px 10px 2px rgba(0,0,0,0.2),0 8px 20px 0 rgba(0,0,0,0.03); border-radius: 3px;">'
    .'<img width="50" height="50" style="border-radius:50%" src="images/default.png" alt="Image cannot be displayed"/>'                 
    .'<p class="uname">&nbsp;'.$uname.'</p>&nbsp;'                  
    .'<p class="time">'.$date.'</p>'
    .'<p class="comment-text" style="word-break: break-all;">'.$content.'</p>'
    .'<a class="link-reply al" id="reply" name="'.$par_code.'" style="padding-top: 18px; float: right;"><i class="fa fa-reply fa-lg" title="Reply"></i></a>';

My javascript code:

$(document).ready(function() {
  $("a#reply").one("click" , function() {
    var comCode = $(this).attr("name");

    var parent = $(this).parent();
    var str1 = "new-reply";
    var str2 = "tog";
    var res = str1.concat(i);
    var tes = str2.concat(i);


// Create a new editor inside the <div id="editor">, setting its value to html

    parent.append("<br /><center><form action='index.php' method='post' id='"+tes+"'><input class='iptext2' type='text' name='uname2' id='uname2' placeholder='Your Name' required /><div style='padding-bottom:5px'></div><textarea class='ckeditor' name='editor' placeholder='Your Query' id='"+res+"' required></textarea><input type='hidden' name='code' value='"+comCode+"' /><br/><input type='submit' class='form-submit' id='form-reply' name='new_reply' value='Reply' /></form></center>")

    CKEDITOR.replace(res);

    /*
    var x = document.getElementById("tes");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
    */

    i++;

   });
})

The following is my css code applied to the anchor tag:

.al {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
.al:hover {
color:#0072bc;
}
.link-reply {
    color:#767676;
}

Here the arrow icon is displayed but is not clickable

Answer 1

您的代码失败，因为您的<a>元素是动态创建的，而事件侦听器仅添加到文档加载时可用的元素。

为了让您的代码正常工作，您需要使用event delegation;即将事件监听器添加到公共静态祖先（例如document或body），然后将其委托给目标元素。

jQuery on和one中可用于实现此效果的方法是JPEG Illustration和Codepen Here，如果您尝试附加一次性事件侦听器，后者更适合您的情况

<强>代码：

$(document).one("click", "a#reply", function() { 
   // ...
});

Answer 2

将on用于DOM上的动态创建事件。

$(document).on("click","a#reply" , function() { 
   console.log('a#reply => clicked!')
});

或者

$(body).on("click","a#reply" , function() { 
       console.log('a#reply => clicked!')
});

该想法的动态<a> not clickable

2 个答案: