CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Sandra Willford
Sandra Willford

Reputation: 3789

jquery link not working after removeClass('disabled')

I have a script that disables links with a class "disabled"

//disabled links
$(document).ready(function() {
   $(".disabled a").click(function() {
     return false;
   });
});

Additionally, I have a script that when the ".edit" button is clicked toggles the disabled state of the inputs in it's own form. It also does a removeClass('disabled') on any matching links in the form.

//toggle form edit
$("#edit").click(function(e) {
  e.preventDefault();
  $(this).closest("form").find("input").prop('disabled',false);
  $(this).closest("form").find(".input-group-addon").removeClass('disabled');
  $("#save").prop('disabled',false);
  $("#edit").prop('disabled',true);
  $(".alert").hide(400, "swing");
});

Then there is a script for adding and deleting input fields

//add input fields
$(".form-group").on('click', 'a.addInput', function() {
  var original = $(this).closest(".input-group");
  original.clone().insertAfter(original);
});

//remove input fields
$(".form-group").on('click', 'a.deleteInput', function() {
  var original = $(this).closest(".input-group");
  if($(this).closest(".form-group").children(".input-group").length > 1) {
    original.remove();
  }
});

HTML:

<form class="edit">
  <div class="panel">
    <div class="panel-heading">
      <span><i class="fa fa-user" aria-hidden="true"></i> Basic Information</span>
      <span class="pull-right"><input id="save" class="btn btn-success" type="submit" value="Save" disabled></span>
      <span class="pull-right"><button id="edit" class="btn btn-default">Edit</button></span>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label for="email">Email</label>
        <div class="input-group">
          <input type="email" class="form-control" placeholder="Email" name="email" value="[email protected]" disabled required>
          <div class="input-group-addon disabled"><a href="#" class="addInput text-success"><span class="fa fa-plus"></span></a></div>
          <div class="input-group-addon disabled"><a href="#" class="deleteInput text-danger"><span class="fa fa-minus"></span></a></div>
        </div>
      </div>
      <div class="form-group">
        <label for="phone">Phone</label>
        <div class="input-group">
          <input type="tel" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="Format: 555-555-5555" name="phone" value="419-555-1212" disabled required>
          <div class="input-group-addon disabled"><a href="#" class="addInput text-success"><span class="fa fa-plus"></span></a></div>
          <div class="input-group-addon disabled"><a href="#" class="deleteInput text-danger"><span class="fa fa-minus"></span></a></div>
        </div>
      </div>
    </div>
  </div>
</form>

The problem I am having is that when the class "disabled" is removed from the links, the links ('a.addInput') & ('a.deleteInput') do not function. What am I missing here?

Upvotes: 0

Views: 106

Answers (2)

Sathish
Sathish

Reputation: 2460

You need to add prevent the event.

$(".form-group").on('click', 'a.addInput', function(e) {
e.preventDefault();
  var original = $(this).closest(".input-group");
  original.clone().insertAfter(original);
});

//remove input fields
$(".form-group").on('click', 'a.deleteInput', function(e) {
e.preventDefault();
  var original = $(this).closest(".input-group");
  if($(this).closest(".form-group").children(".input-group").length > 1) {
    original.remove();
  }
});

or you can add a href="javascript:void(0);" to addInput and deleteInput.

I hope it will be help to achieve your goal...

Upvotes: 1

David
David

Reputation: 218877

Click handlers are attached to elements, not to selectors. So when you do this:

$(".disabled a").click(function() {
    return false;
});

You are assigning that behavior to all elements which match at that moment (in this case, when the document loads). No matter what changes you make to the DOM after the fact, any elements which were matched when you invoked the above code will still have the above click handler.

One approach here could be to assign the click handler to a common unchanging parent, instead of to the elements themselves. By using .on() in this way, you can evaluate the selector dynamically when the click event happens instead of just once when the page loads. Something like this:

$(document).on("click", ".disabled a", function() {
    return false;
});

Then the second selector (".disabled a") will be evaluated with each click. So if the DOM has changed such that an element no longer matches that selector, this click handler won't be used.

Upvotes: 3

Related Questions