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"));
});

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"));
});

• javascript
• jquery

Share Improve this question Follow edited Aug 6, 2012 at 16:20 3logy asked Aug 6, 2012 at 16:00 3logy3logy 2,71288 gold badges4949 silver badges101101 bronze badges 20

• 3 Make sure you've wrapped your code inside a DOM ready handler. – Fabrício Matté Commented Aug 6, 2012 at 16:01
• 1 it doesn't matter if its hidden, it just matters if its on the page. If console.log($('#anotherButton')); really returns nothing than its either not on the page or there is a typo in the selector. – lbstr Commented Aug 6, 2012 at 16:01
• Let's see more of the code. If the element is simply not visible, but still part of the DOM, this should work correctly. – Anthony Grist Commented Aug 6, 2012 at 16:02
• 1 Wow, I just went to test it, and really it is returning undefined. Now that's interesting. – Fabrício Matté Commented Aug 6, 2012 at 16:50
• 1 Weird though, if you copied the answers' code directly to your file and refreshed the page, it should work. – Fabrício Matté Commented Aug 6, 2012 at 16:59

 |  Show 15 more ments

4 Answers 4

Sorted by: Reset to default 3

You can assign it

Live demo

$(function(){
    $('#anotherButton').attr('char', "assigned");
    alert($('#anotherButton').attr('char'));
});​

on Button click

Live Demo

$(function(){
   $('#anotherButton').attr('data-char', "assigned");
   alert($('#anotherButton').attr('data-char'));
});​

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/kshyju/a7Cua/4/

The fact that it is hidden changes nothing. The problem is probably that the js code is before the button HTML. Either put it after, or put it in a listener like $(document).ready() to make sure it has been processed when your try to access it.

Try $(button:hidden)

This usually works for things like this,

Source:http://api.jquery./hidden-selector/