Question

我已经设置了一些jQuery，当点击一个锚标签时会触发它。我们的想法是，当单击锚标记时，会出现一个文本框。我现在有这个工作。

我的问题是什么会导致我的文本框变得无法响应？当我点击文本框时，焦点将被删除。点击功能是否有问题会导致文本框的焦点失效？

以下是我在JS Fiddle中提出的代码：http://jsfiddle.net/4ZtMH/3/

HTML：

<div class="main" id="143"><a href="#" class="thelink">Test Text Here</a></div>
<br />
<div class="main" id="145"><a href="#" class="thelink">Test Text Here</a></div>

jQuery：

$('.thelink') + $('#143').click(function() {
$('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});

$('.thelink') + $('#145').click(function() {
$('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});

Answer 1

当您单击输入框时，它实际上会传播到父级。在父母点击它重新添加HTML

解除绑定点击事件将解决您的问题。 JSFIDDLE

$('.thelink') + $('#143').click(function() {
   $('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $(this).unbind('click');
});

$('.thelink') + $('#145').click(function() {
   $('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $(this).unbind('click');
});

Answer 2

只需在click之后将焦点添加到字段，然后取消绑定click事件。

$('.thelink') + $('#143').on('click',function () {
    $('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername143').focus();
    $(this).unbind('click');
});

$('.thelink') + $('#145').on('click',function () {
    $('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername145').focus();
    $(this).unbind('click');
});

fiddle

Answer 3

您仍然在＃143，＃145等上有点击事件，因此当您点击输入时，您正在再次执行包含'.main'元素的onclick。

也许试试这个：

$('.thelink').click(function() {
    var $container = $(this).closest('.main');
    var container_id = $container.attr('id');
    $container.html('<input type="text" id="pername'+container_id+'" /><input type="button" value="Set Gift" id="submitgiftname" />');
    $('#pername'+container_id).focus();
});

请注意，使用此方法，您不需要为每个链接单独的onclick处理程序。

这是更新的小提琴http://jsfiddle.net/4ZtMH/17/

Answer 4

HTML语法是相同的，但指定为CLICK事件确定的类的链接。查看演示here

$('a.thelink','#143').click(function() {
   $('.main') + $('#143').html('<input type="text" id="pername143" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});

$('a.thelink','#145').click(function() {
   $('.main') + $('#145').html('<input type="text" id="pername145" /> <input type="button" value="Set Gift" id="submitgiftname" />');
});

jquery onclick打破文本框

4 个答案: