JSON array href as a variable in jQuery

问题

I have a getJSON function that converts the results to an html template to display as a list that contains a different hyperlink within each list item. I need to override the normal html function of the link so it doesn't open a new page but loads into a specific divide using the load() method located within my navClickListener() function.

If I put a dummy url into var gotoURL = '';//<--..AND GET THE ITEMS LINK INTO THIS VAR..., it works as planned but I need to grab the actual url's from the array items.

I cannot figure a way to do this. Can you please look thru my snippets and pay attention to the inline comments in all CAPS.

Thank-you for your help.

function loadNav(url, container, appendE) {
        $.getJSON(url, function(data){

            $.each(data.items, function(){
                var newItem = $('#' + container).clone();
                // Now fill in the fields with the data
                . . . .
                newItem.find("a").attr("href", this.gotoURL);//<--PREVENT NORMAL FUNCTION...
                // And add the new list item to the page
                newItem.children().appendTo('#' + appendE)
            });
            . . . .
            // Click listener for navigation items
            var target = data.targetKey;
            var gotoURL = '';//<--..AND GET THE ITEMS LINK INTO THIS VAR...
            navClickListener(appendE, target, gotoURL);
        });
    };

    /* ========== Navigation click listener function ============= */   
    function navClickListener(appendE, target, gotoURL) {
        $('#' + appendE).on('click', 'a', function(e){
            e.preventDefault();
             $('#' + target).load(gotoURL);//<--...SO IT GETS INTO HERE??
             . . . .
        });
    };

回答1:

Ok I'm tired of the adding more comments thing it kept posting when I hit enter.

I guess what I was trying to say is that I don't know where your gotoURL is coming from. I would try putting a dummy url in there for a test to see if your URL updates. If it does then your gotoURL is the problem.

newItem.find("a").attr("href", "IAmtesting.com")

also here is some fiddler

回答2:

The best way to do this I found was to do an inline JavaScript in the href witch required changing the gotoURL row in the database to: javascript:navClickListener('bodyContent', 'http://192.168.1.34/wiki/index.php/Airworthiness_Directive #content'); This is important that its inline to maintain the double-quotes at the ends when newItem.find("a").attr("href", this.gotoURL); is executed in a jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) function. Any other type of methode of inline javaScript will not work!! (ie: javascript:void(0);" onclick='javascript:navClickListener("navContent", "bodyContent" "http://192.168.1.34/wiki/index.php/Airworthiness_Directive #content");') <--See the end-quote before onClick.

Additional script changes from above:

REMOVED:

var gotoURL = '';//<--..AND GET THE ITEMS LINK INTO THIS VAR...
navClickListener(appendE, target, gotoURL);

Changed the navClickListener() function to:

function navClickListener(target, gotoURL) {
    $('#' + target).load(gotoURL);
};

Changed database data in gotoURL from:

/wiki/index.php/Airworthiness_Directive #content

to:

javascript:navClickListener('bodyContent', 'http://192.168.1.34/wiki/index.php/Airworthiness_Directive #content');

来源：https://stackoverflow.com/questions/9949340/json-array-href-as-a-variable-in-jquery

标签

json

function

variables

jquery