1

Edit: Here is a JSFiddle which displays the problem I'm having:

http://jsfiddle.net/gyhvpmgy/4/

I have the following function creating a dynamic div: 

InvalidField.prototype.getMessageStructure = function(){
    var div = $('<div></div>').addClass('invalidRow');      
    var span = $('<span></span>')
        .text(this._message)
    var button = $('<button></button>')
        .addClass('btn_AlertFocus')
        .text("Go To Field")
        .data("field", this._field[0].name)    

    return div.append(button).append(span);
};

Prior to the return line, through debugging I can see that button.data('field') contains, as it should: "applicant.email".

I also have the following generic button click event:

$(document).on('click', '.btn_AlertFocus', function() {
    var field = $(this).data('field');
    goToFieldFromAlert('input[name="' + field + '"]');
});

'field' is now coming up as undefined.

Is anyone able to tell me why, it will probably be something obvious - this is a new feature to me?

Below is the snippet that takes this returned string value.

function validateForm(){
    if(list_Invalid.size() > 0){
        var structure = "";
        for ( i = 0; i < list_Invalid.size(); i ++){
            structure += list_Invalid.item(i).getMessageStructure()[0].outerHTML;
        }
        var alert = new Alert(structure, 
                function(){
                }
            ).showAlert();      
        return false;
    }
    return true;
}

Many thanks!

David Moores
  • 1,025
  • 2
  • 9
  • 23
  • Seems to work http://jsfiddle.net/x7yhvuor/1/ – Huangism Sep 04 '14 at 16:09
  • 1
    For what it's worth, jQuery's `.data()` doesn't use `data-` fields, unless they're added by something else (plain JS, or already in the HTML). – apsillers Sep 04 '14 at 16:15
  • I'm not sure about this, but maybe `this` inside your function refers to the prototype, not the `InvalidField`-Object. So `this._field[0].name` may be undefined. Could you post the context of your example? E.g. the constructor function etc. – red_trumpet Sep 04 '14 at 16:34
  • this._field[0].name has worked inside of that function, it does add to the data object of that button. It's just outside of that function the button seemingly loses the data object. – David Moores Sep 04 '14 at 16:37

1 Answers1

2

jQuery uses an internal representation for working with data.

If you initially had a data attribute on an HTML element, then doing $('foo').data('bar') would cause jQuery reading the attribute into memory. Further working with that data, modifying it, will not cause the attribute to change.

If you didn't have the attribute in the first place, then jQuery would work with data in memory, and the attribute will never appear in HTML.

To explicitly update the HTML attribute, use this:

$('foo').attr('data-bar', 'value');

But it's slower and converts the value into a string.

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
  • Sincere apologies, I stuck up the wrong JSFiddle.. The problem isn't necessarily that it isn't updating the HTML, it's that seemingly the JQuery data store doesn't maintain a relationship with the dynamic element I've created after I pass it back from the function. I believe it's because the element is no longer the same element, but I'm not sure how I can prevent this from happening. I updated the JSFiddle to the correct URL. – David Moores Sep 05 '14 at 13:22
  • From your response however, I realise that your 'attr' manipulation directly and forcing the html in the constructor to give it data-* is a possible, and feasible, work around. – David Moores Sep 05 '14 at 13:25