由于用户的查询,有一个php脚本可以创建多个<p>text</p>
元素。我想创建一个选项,每次用户单击某个元素时,该元素中的文本都会出现在文本框中。完成此类任务的直观方法是:
<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 ...
有什么优雅的方法来实现这个功能吗?
,任何建议都会有帮助
提前感谢
事件委派。
$('body').on('click', 'p[class^=c]', function(evt) {
var clickedPara = $(this);
});
在那里,我过滤class
属性以c
开头的段落。这只是一个示范,但最终可能不是很严密。你应该给你的元素一个公共类。如果这个类是,比如说,"clickablePara",你可以使用
$('body').on('click', 'p.clickablePara', function(evt) {
事件委派意味着绑定一个事件并在触发器元素触发时对其求值,而不是将许多事件绑定到每个可能的元素。如果这对你来说是新的,那么值得一探究竟。如果你碰巧在英国,即将出版的.NET杂志上有一篇我的文章在讨论它。
您可以为HTML元素分配多个类。您可以更改PHP脚本以输出多个类。即
<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
它没有说明使用ajax插入的动态元素,所以我猜这些元素是在页面输出之前在服务器端创建的,不需要委派吗?
$("p[class^='c']").on('click', function() {
$("#textboxID").val(this.innerHTML);
});
FIDDLE