Question

我正在尝试编写一个简单的jquery插件，其中包含textarea或文本框以及一些按钮。

单击按钮，我需要获取相关textarea或文本框的值。

我已经编写了一些代码，但我陷入了困境。任何人都可以帮我这个吗？

(function ($) {

$.fn.widgetify = function (options) {
    var defaults = {
        multi: false
    };
    var settings = $.extend({}, defaults, options);

    return this.each(function () {
        //create all dom elements here
        this.template = $("<div class='outer' id='" + settings.id + "'>Sample Class</div>");
        this.textbox = $("<input type='text' name='sample' id='sample' />");
        this.textarea = $("<textarea name='sampletextarea' id='sampletextarea'></textarea>");
        this.go = $("<input type='button' name='" + settings.id + "_go' id='" + settings.id + "_go' value='Go' />");

        //append all dom elements here
        if (settings.multi) {
            $(this.template).append(this.textarea);
        } else {
            $(this.template).append(this.textbox);
        }
        $(this.template).append(this.go);
        $(this).append(this.template);

        //all events stuff here
        this.go.on('click', $.proxy(function () {
            //use original 'this'
            alert($(this.textarea).val());
        }, this));

        return this;
    });
}

}(jQuery));

Answer 1

你需要修复你的html而不是重复你的div id。将第二个div更改为：

<div id="example-widget-container1"></div>

其余代码看起来很好。至少就这个例子而言。

此外，在您的点击处理程序中，您必须根据您的settings.multi变量提醒textarea和文本框值。

Answer 2

我发现了两个原因。

A）正如我经常提到的关于身份证的问题。你应该用HTML和JS来改变它。

B）在Go.click函数上，您只调用了

alert($(this.textarea).val());

所以，现在文本区域工作正常，Textbox将无法正常工作。您可能想要添加

alert($(this.textbox).val());

让它发挥作用。

Answer 3

有两个问题，首先，您必须在所有输入中添加ID

    this.textbox = $("<input type='text' name='sample" + settings.id + "' id='sample" + settings.id + "' />");
    this.textarea = $("<textarea name='sampletextarea" + settings.id + "' id='sampletextarea" + settings.id + "'></textarea>");

和第二，你必须检查你的多布尔

             if (settings.multi) {
            alert($(this.textarea).val());
        } else {
           alert($(this.textbox).val());
        }

Answer 4

首先，您已使用"#example-widget-container"将插件绑定两次，这就是为什么您没有获得相关输出。

其次，你已经有了dom textarea和dom文本框，所以不必这样做

alert($(this.textarea).val());

而不是

this.go.on('click', $.proxy(function () {
                //use original 'this'
                if (settings.multi) {
                    alert(this.textarea.val());
                } else {
                    alert(this.textbox.val());
                }

            }, this));

会起作用。

请参阅演示here

Jquery插件 - 陷入困境，事件发生

4 个答案: