0

我已经设置了一些 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" />');
});
4

4 回答 4

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');
});
于 2013-04-04T19:27:46.887 回答
0

只需在 之后将焦点添加到该字段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');
});

小提琴

于 2013-04-04T19:30:37.917 回答
0

#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/

于 2013-04-04T19:33:07.287 回答
0

HTML 语法是相同的，但分配类的链接是为 CLICK 事件确定的。在此处查看演示

$('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" />');
});
于 2013-04-04T23:01:50.353 回答