使用javascript编码对按钮按下事件而不是更改事件的响应

如何解决使用javascript编码对按钮按下事件而不是更改事件的响应

我希望这可以理解。我已经为此工作了大约两个星期，而我只是在挖一个更大的洞。

以下（相当标准的代码）从mySQL查询中重新填充选择选项对象（id = brand），其参数为'brand'的值，当上述选项之一时在'fetch.PHP'中调用已选择：

$('#brand').change(function(){
    $.getJSON(
        'fetch.PHP','brand='+$('#brand').val(),function(result){
            $('#brand').empty();
            $.each(result.result,function(){
                $('#brand').append('<option>'+this['brand']+'</option>');
            });
        }
    );
});

但是，我还想在index.html上有一个按钮，该按钮除了不会使用'brand'的值作为查询的参数外，还希望执行相同的操作，而是要使用文本的值页面上的对象（id = demo）。

我的问题是如何在单击按钮后，使用demo的值构造上面的代码来调用“ fetch.PHP”，以便重建选择对象“ brand”。

解决方法

最直接的解决方案是克隆现有代码并对其进行必要的修改（单击按钮听，使用其他字段的值）。

$('#brand').change(function(){
    $.getJSON(
        'fetch.php','brand='+$('#brand').val(),function(result){
            $('#brand').empty();
            $.each(result.result,function(){
                $('#brand').append('<option>'+this['brand']+'</option>');
            });
        }
    );
});

$('#button').click(function(){
    $.getJSON(
        'fetch.php','brand='+$('#demo').val(),function(){
                $('#brand').append('<option>'+this['brand']+'</option>');
            });
        }
    );
});

相反，您可以提取两个代码块的公共部分以使其可重用：

// The common part.
function fetchBrands(brand) {
    $.getJSON(
        'fetch.php','brand='+brand,function(){
                $('#brand').append('<option>'+this['brand']+'</option>');
            });
        }
    );
}

// Listen for change event on the select element.
$('#brand').change(function(){
    fetchBrands($('#brand').val());
});

// Listen for click event on the button.
$('#button').click(function(){
    fetchBrands($('#demo').val());
});

,

您可以使用.triggerHandler( eventType [,extraParameters ] )和extraParameters（在.trigger()文档中对此进行了说明）。
它们将作为参数传递给该事件的注册事件处理程序。

event对象始终作为第一个参数传递给事件 处理程序。也可以将参数数组传递给.trigger() 调用，这些参数也将传递给处理程序 跟随event对象。从jQuery 1.6.2开始，单字符串或 可以传递数字参数而无需将其包装在数组中。

请注意，此处传递的额外参数与 eventData方法的.on()参数。两者都是机制 将信息传递给事件处理程序，但是extraParameters .trigger()的参数允许在当时确定信息 事件被触发，而eventData的{​​{1}}参数需要 处理程序当时已计算的信息 绑定。

将.on()事件处理程序的签名修改为：

change

在更改处理程序中使用function(ev,brand) { // ... } 参数（如果可用），否则在下拉列表中选择值，否则：

brand

然后将其用于brand = brand || $('#brand').val(); 呼叫：

.getJSON()

然后，您可以使用以下任何想要的品牌（例如$.getJSON( 'fetch.php','brand=' + encodeURIComponent(brand),...) ）来触发事件处理程序：

$("#demo").text()

一个有效的示例（使用伪造的$("#brand").triggerHandler("change",$("#demo").text()) 方法）

getJSON()

$(function() {
  $('#brand').change(function(ev,brand){
    brand = brand || $('#brand').val();

    getJSON(brand,function(result){
      $('#brand').empty()
                .append("<option></option>");

      $.each(result,function(){
        $('#brand').append('<option>'+this['brand']+'</option>');
      });
    });
  });

  // the "reset to default values" button
  $("button").on("click",function() {
    $("#brand").triggerHandler("change",$("#demo").text());
  });
  
  // initially fill the drop-down (I didn't want to write the default options also in the markup...)
  $("#brand").triggerHandler("change",$("#demo").text());
});


function getJSON(brand,callback) {
  const fakeResponse = {
    A: [ { brand: "AA" },{ brand: "AB" } ],B: [ { brand: "BA" },{ brand: "BB" } ],default: [ { brand: "A" },{ brand: "B" } ]
  }
  
  callback(fakeResponse[brand]);
}