Jquery "does not recognize" variable in `name`-CodePudding

Example is here https://jsfiddle.net/69k05rvt/2/

On page load creates variable current_tab_name and assign current_tab_name = 'sales_quote';

Also on page load creates input field <input name="' current_tab_name '_product_name" type="text" value="" />

After i click on <span id="sales_invoice">Invoice</span>, assign current_tab_name = 'sales_invoice';. And creates another input field that looks like: <input name="sales_invoice_product_name" type="text" value="">.

Why for sales_quote this $( document ).on( 'keyup', 'input[name*="' current_tab_name '_product_name"]', function() { works, but for sales_invoice does not work. If in https://jsfiddle.net/69k05rvt/2/ i type something in first input field, all works, but if i type in second input field,- does not work.

Here is whole code:

<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")
    );
  }
);

CodePudding user response：

When you set an event using on() with the variable current_tab_name, it will be set to whatever string is set at runtime. In the JSfiddle, that will always be sales_quote_product_name. If you set the following

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

All three events will trigger.

The input[name*="' current_tab_name '_product_name"] event will not update with any changes to current_tab_name since it is set at runtime. You're better off just setting a class to the element and then checking if the name matches like this.

$(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");
    }
});

Edit: You should probably use data attributes instead of the name attribute. E.g.

<input type="text"  data-tab="sales-invoice">
<input type="text"  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");
    }
});

Example: https://jsfiddle.net/c4wx3vpb/