Question

I have a HTML Div (I’m using Twitter Bootstrap to hide-show div2) looking like this:

HTML:

<div id="div1">
  <button id="mybtn">Button</button>
  <div id="div2" class="modal hide fade span12" style="display: none;">
    <button id="anotherButton" data-char="">AnotherButton</button>
  </div>
</div>

With jQuery im trying to change the Value of data-char while im clicking on mybtn. But without success cause div2 is hidden. console.log($('#anotherButton')); return an empty array.

Is there a way to access hidden DOM with jQuery or Javascript?

*Edit: *
By trying this dont work better , return undefined:

$('#mybtn').live('click', function(e) 
{
    //or e.preventDefault();
    $('#anotherbutton').attr("data-char", "assigned");
    alert($('#anotherbutton').attr("data-char"));
});

Answer 1

It looks like data method will not work on elements which are in hidden state. You should use attr method.

This should work fine

$(function(){
  $("#mybtn").click(function(e){
    e.preventDefault();
        $("#anotherButton").attr("data-char","new value");
  });    
});

Working sample http://jsfiddle.net/kshyju/a7Cua/4/