JQuery动态生成按钮出现多余=""字符，点击失效求助

你遇到的多余=""是因为HTML属性的引号嵌套冲突了，和jQuery本身没关系。咱们来拆解一下问题：

当你写这段代码的时候：

$("#card").append('<div><button onclick=" edit("'+k+'")" > Edition</button> my text <br></div>');

生成的HTML会变成：

<button onclick=" edit(" 5b027d9110966772975cb2d4")"=""> Edition</button>

原因很简单：HTML里的onclick属性是用双引号"包裹的，而你在edit()里又直接用了双引号包裹k的值，浏览器会把第一个内层的"当成onclick属性值的结束标记，剩下的5b027d9110966772975cb2d4")"就会被解析成无效的属性片段，浏览器为了“修复”这个错误，就自动补了=""。

而当你用数字12的时候，因为没有引号包裹，所以不会触发这个冲突，所以能正常运行。

下面给你几个解决方案，按推荐程度排序：

1. 最佳实践：用jQuery事件绑定替代内联onclick #

内联事件处理不仅容易出现引号问题，还不利于代码维护。推荐先创建元素，再单独绑定点击事件：

$.ajax({
    url: remoteURL + '?' + 'skip='+ skip + '&' + 'limit=' + limit + '&include_docs=true',
    data: {format: 'json'},
    error: function() { 
        $('#info').html('<p>An error has occurred</p>'); 
    },
    dataType: 'jsonp',
    success: function(data) { 
        console.log(data.rows); 
        data.rows.forEach(function(row) {
            var doc = row.doc;
            // 创建按钮并绑定事件
            var $button = $('<button>Edition</button>').click(function() {
                edit(doc._id);
            });
            // 构建完整的div内容
            var $div = $('<div></div>')
                .append($button)
                .append(' ' + doc.nom + '<br>');
            $("#card").append($div);
        });
    },
    type: 'GET' 
});

这种方式把结构和行为分离，彻底避免了引号冲突，后续修改事件逻辑也更方便。

2. 转义内层双引号 #

如果一定要用内联onclick，需要把内层的双引号转义成\"，这样浏览器才会把它当成属性值的一部分：

$("#card").append('<div><button onclick=" edit(\''+data.rows[x].doc._id+'\')" > Edition</button> '+data.rows[x].doc.nom + '<br></div>');

或者反过来，外层用双引号，内层用单引号（注意字符串拼接的引号对应）：

$("#card").append("<div><button onclick=' edit(\""+data.rows[x].doc._id+"\") '> Edition</button> "+data.rows[x].doc.nom + "<br></div>");

3. 使用模板字符串（ES6+） #

如果你的环境支持ES6，可以用模板字符串来简化拼接，引号嵌套会更直观：

$("#card").append(`<div><button onclick="edit('${data.rows[x].doc._id}')">Edition</button> ${data.rows[x].doc.nom}<br></div>`);

总之，问题的核心就是引号没有正确嵌套导致的HTML解析错误，和jQuery无关，按照上面的方法修改就能解决啦！

内容的提问来源于stack exchange，提问作者jojo45