Question

我创建了一个名为＆＃39; testInfo＆＃39;的jquery插件。这是片段：

$('#loadtest-info').testInfo({
            width: 400,
            title: 'Test Info',
            data:{
                name: nameInfo,
                status: statusInfo,
                region: regions,
                start: starttimeInfo,
                end: endtimeInfo,
                selectRegion:function switchRegion(){alert('')}
            }
        });

我有一个需要执行更改事件的下拉列表：下面是我的下划线模板

'<div class="test-info" id = "test-info"><dt class="label">Region:</dt><dd class="value"><% if ( data.region.length == 1 ) {%><%= data.region %>'
       +' </select><% }%><% if( data.region.length > 1 ) {%><select id = "selectedRegion"><% _.each(data.region,function(field){ %><option value ="<%= field.id%>" <%= (field.select) ? "selected" : "" %>><%= field.name %></option>'
       +'<% }) %></select><% }%></dd><dt class="label">Start:</dt><dd class="value"><%= data.start %></dd><dt class="label">End:</dt><dd class="value"><%= data.end %></dd></dl></div></div>',

我想通过我的插件调用onchange事件。我试过这样的事情：

var self=this;
this.element.find('#selectedRegion').change(self.data.selectRegion)

我无法完成这项工作。任何人都有关于如何通过插件在内部调用更改事件的想法。我避免使用选择器的外部调用：例如，下面的$( "#selectedRegion" ).change(switchRegion);是我的插件的完整代码：

(function ($) {

$.widget('wpm.testInfo', {
options: {
    data: {
        name: "",
        status: "",
        region: "",
        start: "",
        end: "",
        selectedRegion:''
    },
    title: "Test info"
},

_temp:  '<div class="test-info" id = "test-info"><h3 class="info-title"><%= title %></h3>'
       +'<div class="region-table" id ="region-table"><dl> <dt class="label">Name:</dt><dd class="value">'
       +'<%=data.name %></dd> <dt class="label">Status:</dt><dd class="value test-status"><%= data.status %></dd><dt class="label">Region:</dt><dd class="value"><% if ( data.region.length == 1 ) {%><%= data.region %>'
       +' </select><% }%><% if( data.region.length > 1 ) {%><select id = "selectedRegion"><% _.each(data.region,function(field){ %><option value ="<%= field.id%>" <%= (field.select) ? "selected" : "" %>><%= field.name %></option>'
       +'<% }) %></select><% }%></dd><dt class="label">Start:</dt><dd class="value"><%= data.start %></dd><dt class="label">End:</dt><dd class="value"><%= data.end %></dd></dl></div></div>',

_create: function () {
    this.element.addClass('loadtest-info');
    this.element.html(_. template(this._temp,{title:this.options.title,data:this.options.data}));
},

setStatus: function(status){
   if (status){
    this.element.find('.test-info').find('.test-status').text(status);
   }
},

destroy: function () {
   this.element.removeClass('loadtest-info');
   this.element.empty();
}

});})(jQuery);

Answer 1

Pure JS：

var selected = document.getElementById('selectedRegion');
selected.addEventListener('change', function() {alert('something')}, false);

jQuery的：

$(document).on('change', '#selectedRegion', function() {
    alert('something'); 
});

如何通过jquery插件调用onchange on dropdown

1 个答案: