如何用另一个替换按钮使用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

回答

相关问题