How to find a onkeyup embedded deep inside a DOM tree using jquery?


I want to change the onkeyup attribute of a id=“duration” textbox which is buried deep inside the DOM tree. I have a list which is inside a for loop:

var text = '<li><div class="MediaBlock">';
text += '<div><input name="checkboxSelected" type="checkbox"  />' +  selectedListDesc[i];
text += '<span class="MediaItemDescription"><i>' + selectedList[i];
text += ' <div>Duration: <input type="text" id="duration"  name="duration"  onkeyup="saveDur(this, ' + i + ')" value="' + selectedListDur[i] + '" /></div>';
text += '</i></span></div><div style="clear: both"></div></li>';

The reason that I have so many div and span is for formatting, which I have cut short here.

and I want to change the onkeyup it here:

$('#selectedMedia').eq(newPosition).find('#dur').attr("onkeyup", "saveDur(this, " + newPosition + ")");

where newPosition is say the 3rd LI of the selecteMedia UL list. But I think the attr onkey up is not changed. Please help. Thanks.

After the first block of code, you end up with:

<ul id="selectedMedia">
        <div class="MediaBlock">
                <input name="checkboxSelected" type="checkbox"  />
                Description 1
               <span class="MediaItemDescription"><i>List Item 1
                       <input type="text" id="duration"  name="duration"  onkeyup="saveDur(this, 1)" value="Duration 1" />
            <div style="clear: both"></div>

One of the divs isn’t closed off, so you’ll want to tidy that up.

Would you find the onkeyup if you used #duration instead of #dur

Also, if it’s a loop where multiple list items will be created, you should know that id attributes must be unique. If they’re used for styling, then class names can be more appropriate. If they’re there to help you find things, there are other solutions that you should use instead.

Anybody, please?

Thanks for your advice.