如何用另一個替換按鈕使用jQuery

我有一個ADD按鈕，單擊時添加一個表單域。我想要新的表單域按鈕在添加到REMOVE按鈕時更改。如何更改按鈕（請記住，我仍在學習jquery）。這裏是我的代碼如何用另一個替換按鈕使用jQuery

HTML

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }} inputFields"> 
<label for="name" class="col-md-4 control-label">Name</label> 

<div class="col-md-6"> 
    <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus> 

    @if ($errors->has('name')) 
     <span class="help-block"> 
      <strong>{{ $errors->first('name') }}</strong> 
     </span> 
    @endif 
</div> 

<a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></a> 
</div>

腳本

$(document).ready(function(){ 
     $(".addbtn").on('click', function(){ 
      var ele = $(this).closest('.inputFields').clone(true); 
      $(this).closest('.inputFields').after(ele); 
     }) 
});

來源

2017-06-22 Mena

有兩種選擇。創建兩個按鈕並隱藏/顯示它們，或者您可以使用一個按鈕並將其內容更改爲您所需的內容。對於第二個選項，您必須檢查點擊事件，如果它應該是刪除或添加。

我認爲這是你在找什麼

$(document).ready(function(){ 
 
    $(".deletebtn").hide(); 
 

 
     $(".wrapper").on('click', '.addbtn', function(){ 
 
      var ele = $(this).closest('.inputFields').clone(true); 
 
      $(this).closest('.inputFields').after(ele); 
 
      
 
      var el = $(this).closest('.inputFields').next(); 
 
      el.find('.addbtn').hide(); 
 
      el.find('.deletebtn').show(); 
 
     }); 
 
     
 
     $(".wrapper").on('click', '.deletebtn', function(){ 
 
     $(this).closest('.inputFields').remove(); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="form-group inputFields"> 
 
    <label for="name" class="col-md-4 control-label">Name</label> 
 

 
    <div class="col-md-6"> 
 
     <input id="name" type="text" class="form-control" name="name" value="" required autofocus> 
 
    </div> 
 

 
    <a class="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Add</a> 
 
    <a class="deletebtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> Remove</a> 
 
    </div> 
 
</div>

來源

2017-06-22 16:32:32 Schlumpf

'$（「。removebtn」）。on（'click' ，function（）{（this）.closest（'。inputFields'）。remove（）; }）'這不是除去div。看到我做錯了什麼？ – Mena

我不知道當你調用$（「。removebtn」）。時，jQuery是否會找到你的元素。您將動態添加第二個按鈕，因此當您在按鈕類頂部設置事件時，jquery將無法識別該事件。這就是爲什麼我創建包裝div爲了使用$（「。wrapper」）。on（'click'，'.deletebtn'，function（）{。檢查是否有幫助。爲了找到動態添加的按鈕，我們將代碼粘貼到實時測試器（運行代碼片段按鈕）中，您可以單擊刪除並且它將工作 – Schlumpf

看看這個鏈接，這與您在動態內容上綁定jquery事件的問題類似： https://stackoverflow.com/questions/9484295/jquery-click-not-working-for-dynamically-created-items 「您必須添加將事件添加到存在的元素中，不能將事件添加到動態創建的dom元素，如果你想添加事件給他們，你應該使用.on將事件綁定到一個已存在的元素「 – Schlumpf

添加到您的$('.addbtn').on('click'...); ...

$('.addbtn').hide(); 
$('.removebtn').show();

並添加到您的HTML下方的addbtn .. 。

<a class="removebtn"> 
    <i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i> 
</a>

來源

2017-06-22 16:26:42

您可以操縱您正在創建的動態dom對象，就像您可以在jquery中操作任何dom對象一樣。例如，你可以做一些類似的東西（只是一個poc，需要繼續工作）：

$(document).ready(function(){ 
     $(".addbtn").on('click', function(){ 
      var ele = $(this).closest('.inputFields').clone(true); 
ele.find(".addbtn").replaceWith("HTML FOR REMOVE BUTTON"); 
      $(this).closest('.inputFields').after(ele); 
     }) 
});

來源

2017-06-22 16:28:24

該做的工作對我來說。現在我必須弄清楚爲什麼當點擊removebtn時我無法刪除div.inputField。（'click'，function（）{（'inputFields'）。remove（）; }）' – Mena

使用jquery 1.7或更高版本？否則，您需要使用「.live」方法而不是「.on」。（'。'）。你可以做一些像$（this）.parent（「。inputFields」）。remove（），這樣你就不會解決錯誤的.inputFields –

如何用另一個替換按鈕使用jQuery

回答

相關問題