Jquery "does not recognize" `name` 中的变量

Question

在页面加载时创建变量 current_tab_name 并赋值 current_tab_name = 'sales_quote';

还在页面加载时创建输入字段<input name="' + current_tab_name + '_product_name" type="text" value="" />

点击<span id="sales_invoice">Invoice</span>后，分配current_tab_name = 'sales_invoice';。并创建另一个输入字段，如下所示：<input name="sales_invoice_product_name" type="text" value="">.

为什么 sales_quote 这个 $( document ).on( 'keyup', 'input[name*="' + current_tab_name + '_product_name"]', function() { 有效，但 sales_invoice 无效。如果在 https://jsfiddle.net/69k05rvt/2/ 中我在第一个输入字段中输入内容，一切正常，但如果我在第二个输入字段中输入，- 不起作用。

完整代码如下：

<span id="sales_invoice">Invoice</span>
<div id="gsg_sales_quote"></div> 
<div id="gsg_sales_invoice"></div>

var current_tab_name = "";
if (current_tab_name === "") {
  current_tab_name = "sales_quote";
}

$(document).on("click", "#sales_invoice ", function () {
  //current_tab_name = $(this).attr('id').trim();
  current_tab_name = "sales_invoice";
  add_first_group_of_goods_services();
  //console.log( 'current_tab_name ' + typeof current_tab_name + ' / ' + current_tab_name );
});

function add_first_group_of_goods_services() {
  //console.log('inside function add_first_group_of_goods_services ' + current_tab_name);
  var new_goods_services = $(document.createElement("div"));
  new_goods_services
    .after()
    .html(
      '<input name="' +
        current_tab_name +
        '_product_name" type="text" value="" />'
    );
  new_goods_services.appendTo("#gsg_" + current_tab_name);
}
add_first_group_of_goods_services();

$(document).on("keyup", function () {
  console.log(
    "current_tab_name:" +
      current_tab_name +
      " / Keyup $(this).attr(name):" +
      $(this).attr("name")
  );
});

$(document).on(
  "keyup",
  'input[name*="' + current_tab_name + '_product_name"]',
  function () {
    console.log(
      "current_tab_name:" +
        current_tab_name +
        " / With var $(this).attr(name):" +
        $(this).attr("name")
    );
  }
);

$(document).on(
  "keyup",
  'input[name*="sales_invoice_product_name"]',
  function () {
    console.log(
      "current_tab_name:" +
        current_tab_name +
        " / Without var $(this).attr(name):" +
        $(this).attr("name")
    );
  }
);

Answer 1

当您使用 on() 和变量 current_tab_name 设置事件时，它将被设置为运行时设置的任何字符串。在 JSfiddle 中，它总是 sales_quote_product_name。如果你设置如下

if( current_tab_name === '' ){ 
current_tab_name = 'sales_invoice';
}

三个事件都会触发。

input[name*="' + current_tab_name + '_product_name"] 事件不会随 current_tab_name 的任何更改而更新，因为它是在运行时设置的。您最好只为元素设置一个 class，然后检查名称是否像这样匹配。

$(document).on("keyup", ".tab-input", function(data){
    if ($(this).attr("name") == "sales_quote_product_name"){
        console.log("Fire sales quote");
    }else if ($(this).attr("name") == "sales_invoice_product_name"){
        console.log("First sales invoice");
    }
});

编辑：您可能应该使用数据属性而不是名称属性。例如

<input type="text" class="tab-input" data-tab="sales-invoice">
<input type="text" class="tab-input" data-tab="sales-quote">

$(document).on("keyup", ".tab-input", function(data){
    console.log("Tab: " + $(this).data("tab"));
    if ($(this).data("tab") == "sales-quote"){
        console.log("Fire sales quote");
    }else if ($(this).data("tab") == "sales-invoice"){
        console.log("First sales invoice");
    }
});

示例：https://jsfiddle.net/c4wx3vpb/

Jquery "does not recognize" `name` 中的变量

Jquery "does not recognize" variable in `name`

jquery