如何将每个功能或方法分配给按钮？

Question

Note: I'm still new in programming.

I have a JavaScript page that creates toggle buttons when the page loads, but i cannot use those buttons independently now because the id of the button is a column name on my database table. so i cannot know it beforehand, that is why i cannot assign a method or function on each button.

This is how the toggle button is created :

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
  return '\n<input' + (tbID ? ' id=\'' + tbID + '\'' : '') + 
    (tbClass ? ' class=\'' + tbClass + '\'' : '') + 
    (tbType ? ' type=\'' + tbType + '\'' : '') + 
    (tbValue ? ' value=\'' + tbValue + '\'' : '') + 
    (onClick ? ' onclick=\'' + onClick + '\'' : '') + '>';

}

function DisplayButtons(cableData) {
  var newContent = '';
  $.each(cableData, function (i, item) {
    function toggle() {
      $("#tb" + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
    newContent += createButtons("tb" + item.CommonCable, 
          null, "submit", item.CommonCable, toggle());
  });
  $("#Categories")
    .html(newContent);
}

NOTE : Anyone who can help asap ,how can i assign each function or method to each button ? : Or any other way i can use to create my toggle buttons ?

Answer 1

You need something like this:

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
    var btn = $('<input>', {id:(tbID ? tbID : ''),
                         "class":(tbClass ? tbClass : ''),
                         "type":(tbType ? tbType : ''),
                          value:(tbValue ?  tbValue : ''),                        
                         });
     if(onClick)
         btn.click(onClick);
     return btn;
} 
function toggle() {
      $(this)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $(this)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
function DisplayButtons(cableData) {
  var newContent = [];
  $.each(cableData, function (i, item) {        
    newContent.push(createButtons("tb" + item.CommonCable, 
          null, "submit", item.CommonCable, toggle));
  });
  $("#Categories").empty()
    .append(newContent);
}

See how button is created in jquery style. Also, when you add onclick, you should pass pointer to a function you want to call on click, like here: createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable, toggle) . when you do toogle() , like in your code, you immediately execute your function and value returned by that function is used as onclick value. Also, take a look how newly created button are added to array and than added to #categories element with .append method. Not sure if you need .empty , but that will work completely like your .html(newContent). If you have some content in categories which should stay there, just remove empty

UPD Also, please note that you do not need to create an new toggle function for each new button. If you apply it like .click(toogle), this in toggle function will always point to clicked button and you do not need to find it using id. Not sure what is .clicked in your code. As far as I know, jQuery object has nothing like that.

Answer 2

Why don't you generate a unique id for each button created?

Something like:

 $.each(cableData, function (i, item) {
    function toggle() {
      $("#tb" + i + item.CommonCable)
        .clicked ? $('#MyElement')
        .addClass('clickedButton');
      $("#tb" + i + item.CommonCable)
        .removeClass("clickedButton");
      $('#MyElement')
        .toggleClass('MyClass');
    }
    newContent += createButtons("tb" + i + item.CommonCable, 
          null, "submit", item.CommonCable, toggle());
  });

But I think you are in the wrong direction.

You can add the same class name on each button, for instance: tableButton , and then assign an event for all the element with this class name:

  $(".tableButton").on("click", function (event) {
    $('#MyElement').addClass('clickedButton').toggleClass('MyClass');
    $(this).removeClass("clickedButton");
  });

Then you can, when jQuery is ready, generate your button without any onclick action (already binded by the previous function) and with the class name:

  $.each(cableData, function (i, item) {
    newContent += createButtons(".tableButton", 
          null, "submit", item.CommonCable);
  });

And the final code will look like this:

$(function () {
  $(".tableButton").on("click", function (event) {
    $('#MyElement').addClass('clickedButton').toggleClass('MyClass');
    $(this).removeClass("clickedButton");
  });

  var newContent = "";
  $.each(cableData, function (i, item) {
    newContent += createButtons(".tableButton", 
          null, "submit", item.CommonCable);
  });

  $("#Categories").html(newContent);
});