Question

请检查代码..

$(".editable").live("click",function(){
CurrentOBJhtml = $(this).text();
nextHtml = "<input type='text' class='hoverable' value='"+CurrentOBJhtml+"'  />";
var c = nextHtml;
alert(c); //here two alert box comes....
$(this).html(c);

});

当我警告c时，它会在两个警告框中提醒两个值......

第一个值是<input type='text' value='myname' class='hoverable' /> 第二个是<input type='text' value='' class='hoverable' />，其中第二个没有value。

当我评论最后一行（$(this).html(c);）时，它只给出第一个结果。

我有什么问题？我完全糊涂了。

请帮我解决这个问题。

谢谢。

更新：

HTML：

  <fieldset id="user_info_module">
<label>username:</label>
<label class="editable" id="user_info_username">
<label>Email:</label>
<label id="user_info_email"> </label>
<label>Default page:</label>
<label id="user_info_defaultpage"></label>
<label>mobile:</label><label id="user_info_mobile"></label>
<label>country:</label><label id="user_info_country"></label>
<label>address:</label><label id="user_info_address"></label>
<label>pincode:</label><label id="user_info_pincode"></label>
<label>landline:</label><label id="user_info_landline"></label>
</fieldset>

http://jsfiddle.net/M3J2p/1/

Answer 1

您可能有两个“可编辑”类的元素，或者您调用上面两次的代码。你在document.ready中有吗？或通过功能调用它？

Answer 2

首先将你的jquery代码放在$(document).ready(function());处理程序中。

并检查此jsfiddle，它没有向我显示任何双重警告框。当您单击某个元素时，this将引用该特定元素而不是其他元素。

更新您的html代码以确认确切的问题或为您的问题创建一个示例jsfiddle。

编辑：错误原因并已解决

在jQuery 1.7之前，阻止更多处理程序在执行后执行使用.live（）绑定，处理程序必须返回false。调用 .stopPropagation（）不会实现这一点。

$("a").live("click", function(event){
  event.preventDefault();
});

根据您的代码检查更新后的jsfiddle。你错过了关闭一个标签，并且当你使用它时发生上述事件冒泡问题。在更新的jquery中使用.on() ..

在jQuery上查看.live()文档，以便更好地了解这一点。

Answer 3

我认为$（“。editable”）找到多个元素。如果要查找特定元素，请考虑使用Id，或者还可以检查目标是否是回调中的正确目标。

$(".editable").live("click",function(event)
{
   if (event.target == mytarget)
   {
         // do something
   }
});

在jQuery中设置元素的HTML属性

3 个答案: