通過事件觸發器/按鈕將參數傳遞給javascript函數

我有一個javascript函數，用於向div添加和刪除額外的輸入字段。通過事件觸發器/按鈕將參數傳遞給javascript函數

在一個特定的情況下，我可以指定在調用函數時添加字段的div。

但是，我想要在一個頁面上有多個按鈕與多個相應的div相關聯，可以調用該函數添加一個字段到div div。

功能：

$(function() { 
     var scntDiv = $('#DIV'); 
     var i = $('#DIV p').size() + 1; 

     $('.addField').on('click', function() { 
       $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#" id="remField">Remove</a></p>').appendTo(scntDiv); 
       i++; 
       return false; 
     }); 

     $('.remField').on('click', function() { 
       if(i > 2) { 
         $(this).parents('p').remove(); 
         i--; 
       } 
       return false; 
     }); 
});

正如你所看到的添加字段按鈕監聽與類「激活addField」被點擊的按鈕。

我想單擊以傳遞#DIV的參數等於該按鈕的父div的＃，這可能嗎？

編輯：使用的按鈕，例如 - 每請求，這裏是我的標記（示例）與功能（注意???佔位符） JsFiddle

來源

2013-11-14 Gideon

FYI'live'方法已被棄用。您應該使用'on'。 – VisioN

發佈您的HTML標記和是的，這是可能的 – tymeJV

不僅是可能的，這幾乎是我用於電話屏幕候選人的確切問題，當我要求他們解釋事件代表團。 – Mathletics

這是否jsfiddle訣竅？

HTML：

<div id="div"> 
    <div> 
     <button type="button"> 
      <span>Add Field</span> 
     </button> 
    </div> 
    <div> 
     <button type="button"> 
      <span>Add Field</span> 
     </button> 
    </div> 
    <div> 
     <button type="button"> 
      <span>Add Field</span> 
     </button> 
    </div> 
</div>

的JavaScript：

(function ($, undefined) { 
    'use strict'; 
    var i; 
    i = 0; 
    function fieldMaker() { 
     i += 1; 
     return $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#">Remove</a></p>'); 
    } 
    $(function() { 
     $('#div').on({ 
      click : function() { 
       $(this).closest('div').append(fieldMaker()); 
      } 
     }, 'button'); 
     $('#div').on({ 
      click : function() { 
       $(this).closest('p').remove(); 
      } 
     }, 'a'); 
    }); 
}(jQuery));

來源

2013-11-14 16:17:18 jameslafferty

你可以存儲的信息 - 其中添加的輸入HTML5的data-*屬性：

<p><button data-add-field-to=".fieldset-1">add field to .fieldset-1</button></p> 
<fieldset class="fieldset-1"></fieldset>

JS：

jQuery(function() { 
    var i = 1; // your counter logic here 
    jQuery('[data-add-field-to]').each(function() { 
     var $button = $(this); 
     $button.on('click', function(event) { 
      var newFieldId = 'field_' + i, 
       target = jQuery($button.attr('data-add-field-to')); 
      jQuery('<input type="text" id="' + newFieldId +'" size="20" name="' + newFieldId +'" value="" />').appendTo(target); 
      i++; 
      return false; 
     }); 
    }); 
});

來源

2013-11-14 16:09:04 feeela

我只是習慣於HTML 5，但我的權利，我的理解是，這不適用於瀏覽器不支持它？ – Gideon

由於您正在使用jQuery，它在任何瀏覽器中引入數據屬性之前就已經支持數據屬性：是的，它應該可以在任何地方工作。你不依賴於這裏一些奇特的瀏覽器功能。 – feeela

我會假設你有按鍵之間的映射（假設按鈕ID）和元素添加到：

var mapping = { 
    '#button1' : $('#receiver1'), 
    '#button2' : $('#receiver2'), 
    '#button3' : $('#receiver3') 
}

一個解決方案是檢查觸發點擊事件的按鈕：

$('.addField').on('click', function() { 
    $('<mycontent>').appendTo(mapping(this.id)); 
    i++; 
    return false; 
});

更好的解決方案是爲每個按鈕創建一個函數：

Object.keys(mapping).forEach(function(key){ 
    $(key).on('click', function() { 
     $('<mycontent>').appendTo(this); 
     i++; 
     return false; 
    }.bind(mapping[key])); // force this to be the receiver 
});

來源

2013-11-14 16:20:25 Tibos

通過事件觸發器/按鈕將參數傳遞給javascript函數

回答

相關問題