CODEWITHSUNDEEP
jqueryhtml
Denn
Denn

Reputation: 83

jQuery cannot find the parent

This is what I am trying to get: when you click #edit jQuery finds in the closest tr the td called #collapse, and replaces its content with an input which has as value the previous #collapse html. I tried on jsFiddle without any success: http://jsfiddle.net/8PDdn/1/

Can anyone help me to get what I wanted to get?

Upvotes: 1

Views: 120

Answers (3)

Ram
Ram

Reputation: 144669

preventDefault() is one of the methods of the event object not the selected element, you should call it for the event object instead, also you can use the blur event of the input for modifying contents of the div tag after editing: 

$(function() {   
    $("a#edit").click(function(event) {
        event.preventDefault();
        var currentTodo = $("#collapse");
        var cVal = currentTodo.html();
        currentTodo.html('<input type="text" name="description" value="'+ cVal +'">');
    });

    $(document).on('blur', '#collapse input', function(){
        $(this).parent().html(this.value)
    })
});

Fiddle

Upvotes: 1

Tomer
Tomer

Reputation: 17930

Few things are wrong here:

  1. id should be unique, you have many elements with the same id, change it to class.

  2. your problem is caused by this:

    $("a#edit").click(function() {
    $(this).preventDefault(); ---> there is no preventDefault method on this
   ...
});

you need to change it to:

$("a#edit").click(function(e) {
        $(e).preventDefault();
       ...
    });

Upvotes: 0

Dave Kiss
Dave Kiss

Reputation: 10487

    $(this).preventDefault();

That isn't how you prevent the default event. You need to pass the event to the callback.

$(function() {

    $("a#edit").click(function(e) {
        $(e).preventDefault();
        var currentTodo = $(this).closest("tr").find("#collapse");
        var cVal = currentTodo.html();
        currentTodo.html('<input type="text" name="description" value="'+ cVal +'">');
    });

});

Upvotes: 0

Related Questions