Question

I have a trivia page that is dynamically generated by some javascript code. It works fine in most browsers (Chrome, Safari, Firefox, Opera, IE9) but is having an odd issue with IE8. When I’m calling $(this).val() as part of a button click event handler, I’m getting an empty string as the response, even though the button clicked has a value.

Relevant JavaScript:

$(document).ready(function() {
    $(document).on("click", ".btn", function() {
        if(panel % numPanels === 1)
            {category = $(this).val();}
        nextPanel(prop);
    });
});

Relevant HTML:

<div id="buttons">
<button type="button" class="btn" value="One">Group One</button>
<button type="button" class="btn" value="Two">Group Two</button>
<button type="button" class="btn" value="Three">Group Three</button>
</div>

Any idea what’s up?

Edit: I’m using jQuery 1.7.2, and using console.log($(this).attr("value")) and console.log($(this).prop("value")) are also returning a blank string.

Answer 1

its a bug in <button> if you are going to use javascript then my surgestion is that you use the html -data attribute:

<div id="buttons">
    <button type="button" class="btn" data-value="One">Group One</button>
    <button type="button" class="btn" data-value="Two">Group Two</button>
    <button type="button" class="btn" data-value="Three">Group Three</button>
</div>

and use the jquery code:

$(document).ready(function() {
    $(document).on("click", ".btn", function() {
        if(panel % numPanels === 1) {
            category = $(this).data("value");
        }
        nextPanel(prop);
    });
});