dude
dude

Reputation: 4962

Change the id of button id on clone jquery

<div id="del2">
<textarea placeholder="School" class="form-control input-lg" name="message2" id="message2" rows="1" cols="30">School</textarea>
 <button id="delete1" type="button" class="btn btn-default">Delete this Widget</button></div>

code

$("#"+divid) .clone().attr('id', 'del'+ value).insertAfter($("#"+divid)).find('textarea').attr('name', 'message'+ value).attr('id', 'message'+ value).find("button").button().attr('id', 'delete'+value);

I am able to change the id of div and textarea on clone but the issue is that i cant change the id of button id.

Upvotes: 0

Views: 172

Answers (1)

Terry
Terry

Reputation: 66123

That is because you are trying to find <button> in the <textarea> element. I have indented your code to make it a little more readable:

$("#"+divid) 
.clone()
.attr('id', 'del'+ value)
.insertAfter($("#"+divid))
.find('textarea')
    .attr('name', 'message'+ value)
    .attr('id', 'message'+ value)
    .find("button")  // Problem is here - you are finding <button> in <textarea>
        .button()
        .attr('id', 'delete'+value);

Try using .end() (see documentation) after you're done working with an element fetched using .find(), in order to return the previous selected object. Also, you can actually combine the two .attr() methods by using objects:

$('#'+divid) 
.clone()
.attr('id', 'del'+ value)
.insertAfter($('#'+divid))
.find('textarea')
    .attr({
        'name': 'message'+ value,
        'id': 'message'+ value
     })
    .end() // Forces return to previously matched elements, i.e. the cloned element
.find('button')
    .button()
    .attr('id', 'delete'+value);

Upvotes: 1

Related Questions