Question

我想在某些文本字段中添加一个按钮，以允许其他输入方法。由于按钮应该能够引用它所属的文本字段，因此我在按钮的onClick()处理程序中向函数调用添加一个参数，其中包含文本字段的ID。

至少，这是我的计划。当我获取文本字段的ID并将其显示在警报中时，它会很好地显示。但是，当我使用$(this).attr('id')的结果作为函数参数时，我希望将一个字符串赋予函数（元素的id）。而是给出了一些奇怪的对象。

如何将该对象转换为字符串？或者是否存在概念上的缺陷？

<form>
<input class="joeDateTime" type="text" name="n1" id="n1" value="2014-09-01 17:30:00">
</form>

<script>
function handleJoeDateTime(e)
{
    alert('Edit '+e); // shows 'Edit [object HTMLInputElement]'
}

$(document).ready(function() {

    $('.joeDateTime').each(function(){
        var i = $(this).attr('id');
        alert(i); // shows 'n1'
        $('<button onclick="handleJoeDateTime(' + i + ');return false;"></button>').insertAfter($(this));
    });

});
</script>

Answer 1

您没有将i作为字符串值传递，而是将其作为变量传递。在现代浏览器中，元素的id被复制到窗口对象的属性中（因此您可以作为全局变量访问）。

因此，您需要使用引号将它们括起来，以i作为字符串值传递

$('<button onclick="handleJoeDateTime(\'' + i + '\');return false;"></button>').insertAfter($(this));

演示：Fiddle

此外，我建议使用jQuery事件处理程序

，而不是使用内联事件处理程序

$('.joeDateTime').each(function () {
    var i = $(this).attr('id');
    console.log(i); // shows 'n1'
    $('<button />', {
        text: '',
        click: function () {
            handleJoeDateTime(i);
            return false;
        }
    }).insertAfter(this);
});

演示：Fiddle

Answer 2

你的问题在于：

$('<button onclick="handleJoeDateTime(' + i + ');return false;"></button>')

这应该是

$('<button onclick=\"handleJoeDateTime(\"' + i + '\");return false;\"></button>')

当你将一个元素传递给jQuery（$）时，它就变成了一个jquery对象。它已经被用来处理id，class，elements，而不是html块。你想要的是插入一个连接元素作为一个html节点。

所以首先连接你的元素，然后用jQuery的after()方法附加它（或用vanilia js var btn = document.createElement("BUTTON");创建/附加它）

 var Button = '<button class=\"AltBut\" id=\"' + i + '\"></button>';
 $(this).after(Button);

或（对于强化）

$(this).after('<button class=\"AltBut\" id=\"' + i + '\"></button>');

在这个例子中，我在每个启用的按钮中添加了一个id，用于存储变量i

然后为这些按钮添加一个点击监听器，避免以任何价格内联js，以保持可维护性。

$('.AltBut').on('click',function(){
        var i = $(this).attr("id");
        alert("i= "+i);
        return false;
})

整个演示在这里：http://jsfiddle.net/x6x4v90y/1/

jQuery id不会产生文本表示

2 个答案: