Внедрить HTML, используя Javascript

Question

Я должен вставить следующую строку HTML в документ через JavaScript:

<button type='button'>btnName </button>

В дополнение к этому, я должен зарегистрировать нажатие на кнопку, когда вызываемая функция ожидает, что аргумент скажет 'arg', поэтому JavaScript выглядит примерно так:

var html = "<button type='button' onclick='+ fnName +
    "(the param shld go here)'>" + btnName + "</button>"

Как мне этого добиться? Одним из очевидных решений является присвоение идентификатора кнопке и последующая регистрация функции щелчка после добавления HTML-документа к документу. Но я не хочу этого делать, потому что там слишком много кнопок. Есть еще один вариант, о котором вы можете подумать.

Дополнение: Имя функции является динамическим, и входящее 'arg' также является динамическим. Идентификатор, если он вообще требуется, должен генерироваться автоматически.

**

У меня есть решение, см. Ниже

**

Answer 1

Я бы порекомендовал jquery.

Что-то вроде

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$(document).append(
  $("input")
  .attr("type", "button")
  .click(function(){
    doSomething()
  ))
);
</script>

Answer 2

Вам следует избегать использования onclick в качестве атрибута HTML. Вместо этого создайте кнопку программно через интерфейс DOM и прикрепите событие как свойство.

var button       = document.createElement("button");
button.type      = "button";
button.innerHTML = btnName;
button.onclick   = function() {
    window[fnName](data);
};

// Insert the button into whatever container node you are populating
someContainerNode.appendChild(button);

Или способ jQuery, так как именно туда движется группа:

$("<button type='button'>" + btnName + "</button>").click(function() {
    window[fnName](data);
}).appendTo(someContainerNode);

Кроме того, поскольку вы не устанавливаете обработчик onclick как строку, вам не нужно преобразовывать аргумент функции data в строку JSON, что повысит производительность.

Answer 3

У меня есть решение: -

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"

Answer 4

Если вы не хотите привязывать событие к каждой отдельной кнопке, вы можете привязать одно событие к родительскому элементу всех этих кнопок (например, к родительскому элементу div, содержащему, например, кнопки), а затем использовать всплывающее окно события для достижения аналогичного эффект.

, например

<div id="parent">   
   <button id="b0">text</button>
   <button id="b1">text</button>
   <button id="b2">text</button>
   <button id="b3">text</button>
   <button id="b4">text</button>
   <button id="b5">text</button>
</div>
<script>
   $("#parent").click(function(e){
       if ($(e.target).attr("id") === "b0") {
          // do b0's stuff
       } else if ($(e.target).attr("id") === "b1") {
          //do b1's stuff 
       } //etc 
   });
</script>

другой способ сделать это - использовать jquery live events - они, по сути, делают то, что я написал выше (конечно, более элегантно). Что касается аргументов, как вы получаете аргументы в первую очередь? не зная этого, я не могу сказать вам лучший путь вперед.

Answer 5

вы можете использовать document.write для этой переменной. var html = document.write ('' + btnName + ''). Пожалуйста, исправьте одинарные и двойные кавычки. Я не знаю, полезно вам это или нет

Answer 6

Поскольку вы не хотите назначать метод onclick обычными способами, обходным путем было бы заставить их всех вызвать функцию с уникальным идентифицирующим номером. Функция будет иметь двумерный массив с аргументом, при этом предполагается, что каждая кнопка вызывает одну и ту же функцию с другим параметром.

Редактировать: Возможно, я неправильно понял, вот код , а не с использованием jQuery, который я использовал в недавнем проекте.

for(var place = 0; place < 5; place++)
        {
            if(document.getElementById('title_'+ place).addEventListener)//this is for compatablity
                document.getElementById('title_'+ place).addEventListener('click', function(e){/*some code*/});
            else if(document.getElementById('title_'+ place).attachEvent)
                document.getElementById('title_'+ place).attachEvent('onclick',  function(e){/*some code*/});
            else
                document.getElementById('title_'+ place) = function(e){/*some code*/};
        }

Код добавляет событие onClick к пяти объектам, и поскольку он проверяет, какой метод работает в текущем браузере, он поддерживает основные браузеры (насколько я тестировал).

Я вынул некоторый код для удобства чтения, но это был всего лишь код в функциях, которые будут вызываться.