1

<p>text</p>由于用户的查询，有一个 php 脚本会创建多个元素。我想创建一个选项，每次用户单击某个元素时，该元素中的文本都会出现在文本框中。执行此类任务的直观方法是：

<p class="c1"> textA...</p>
<p class="c2"> textB...</p>
<p class="c3"> textC...</p>
<p class="c4"> textD...</p>

jQuery代码将是：

$("p.c1").click(function(){ code... }
$("p.c2").click(function(){ code... }
etc ...

有没有什么优雅的方法可以实现这个功能？

任何建议都会有所帮助，

提前致谢

4

3 回答 3

4

事件委托。

$('body').on('click', 'p[class^=c]', function(evt) {
    var clickedPara = $(this);
});

在那里，我过滤class属性以c. 这只是示范性的，但最终可能不是很无懈可击。你应该给你的元素一个通用的类。如果这个类是'clickablePara'，你可以改用

$('body').on('click', 'p.clickablePara', function(evt) {

事件委托意味着您绑定一个事件并在触发元素时对其进行评估，而不是将大量事件绑定到每个可能的元素。如果这对您来说是新的，那么值得研究。如果您碰巧在英国，即将出版的 .NET 杂志有一篇文章由我讨论。

于 2012-07-29T18:52:23.317 回答
1

您可以为 HTML 元素分配多个类。您可以更改 PHP 脚本以输出多个类。IE

<p class="c1 clickable"> textA...</p>
<p class="c2 clickable"> textB...</p>
<p class="c3 clickable"> textC...</p>
<p class="c4 clickable"> textD...</p>

然后就可以使用点击功能了。

   $("p.clickable").click(function () {
                $('#yourtextbox').val($(this).text());
            });

JSFIDDLE

于 2012-07-29T18:57:17.760 回答
1

它没有说明使用 ajax 插入的动态元素，所以我猜这些元素是在页面输出之前在服务器端创建的，并且不需要委托？

$("p[class^='c']").on('click', function() {
    $("#textboxID").val(this.innerHTML);
});

小提琴

于 2012-07-29T19:03:50.653 回答