Question

我正在使用JS自动生成一个用于邮政编码搜索的输入框和按钮。以下JS生成了按钮。但是我需要稍微修改输出，以便生成一个包含在特定范围内的按钮：

<span class="input-group-btn">
    <button class="btn btn-primary" type="button">Find Address</button>
</span>

我不能直接在PHP中包含span，因为JS用输入框和按钮替换了目标div的所有内容。这是生成按钮的JS。

   var self = this;
    if ($(this.button).length) {
        this.$button = $(this.button).first();
    } else {
        this.$button = $('<button />', {
            html: this.button_label,
            id: this.button_id,
            type: "button"
        })
        .appendTo(this.$context)
        .addClass(this.button_class)
        .attr("onclick", "return false;")
        .submit(function () {
            return false;
        });
    }
    this.$button.click(function () {
        var postcode = self.$input.val();
        self.disableLookup();
        self.clearAll();
        self.lookupPostcode(postcode);
    });
    return this.$button;
};

我试图将最后一行修改为以下内容，但似乎无法正常工作

return '<span class="input-group-btn">'+this.$button+'</span>

Answer 1

添加此...

this.$button.wrap($("<span/>", { class: "input-group-btn" }));

返回按钮之前。它会根据需要将其包装在跨度中。

您遇到的问题是您尝试返回与jQuery对象连接的字符串值，然后是另一个字符串。这会将jQuery对象（您的按钮）转换为表示对象的字符串。

为了便于阅读，您可能希望将其拆分为......

var $span = $("<span/>", { class: "input-group-btn" });
this.$button.wrap($span);

它看起来更友好，更容易理解，但做同样的事情。

以下是wrap() ...

的文档

http://api.jquery.com/wrap/

Answer 2

当你说“它不起作用”时，会发生什么？

我的猜测是你忘记了跨度代码第一部分的结尾克拉。它应该看起来像这样

return '<span class="input-group-btn">'+this.$button+'</span>';

修改JS生成的输出

2 个答案: