在我的JavaScript中手动触发href或onClick

Question

I'm customizing a website that was build by someone else using a WYSIWYG. I'm stuck with an href having javascript in it.

How can I, onClick of this anchor tag, capture the href, change it's value to # , preventDefault, and then actually run what was going to originally be ran? I know this is a bit odd, but it's currently causing IE errors and I believe it will fix it.

HTML:

<a class="cpMonthNavigation" href="javascript:CP_refreshCalendar(3,1,2012);">&lt;&lt;</a>

jQuery:

$(document).click({namespace: this}, function (e) {
    var t = e.data.namespace;

    if ($(e.target).is($(".cpMonthNavigation"))) {
        e.preventDefault();

        $(e.target).attr("href").replace(/javascript:/i, "");
        // This is where I need to manually run the function that was in the HREF
    }
}

Please keep in mind that I cannot edit the HTML. I'm stuck with it and it's terrible-ness.

I need to preventDefault so that the vendor code does not run but still run what's actually in the href. There are multiple things behind the scenes in the vendor code bound to the click of this anchor.

Answer 1

Try this piece of jQuery code:

$(".cpMonthNavigation").click(function (e) {
    e.preventDefault();
    var expression = $(this).attr("href"); 
    eval(expression);
    $(this).attr("href", "#");
};

Answer 2

I may be making this simpler than needed but to simply run the function, preventing defaults:

$(document).on('click', 'a.cpMonthNavigation', function(e) {
    e.preventDefault();
    var myHref = $(this).attr("href");
    myHref = myHref.replace(/javascript:/i, "");
    var myNewFunc = myHref.replace(/javascript:/i, /""/i);
    eval(myNewFunc);
});

a working example here: http://jsfiddle.net/MarkSchultheiss/Vta56/

EDIT: shorter version of above:

$(document).on('click', 'a.cpMonthNavigation', function(e) {
    e.preventDefault();
    eval($(this).attr("href").replace(/javascript:/i, ""));
});

Answer 3

You can use eval to invoke the function. But that is considered as a bad practice in Javascript Programming .

The other way i could think of is, define the function inside an object like,

var operations = {
    CP_refreshCalendar : function(mm, dd, yyyy){
                              //your code
    }
}

Then, from the click event handler, you could do

$(document).click({namespace: this}, function (e) {
var t = e.data.namespace;

if ($(e.target).is($(".cpMonthNavigation"))) {
    e.preventDefault();

    var hrefVal = $(e.target).attr("href").replace(/javascript:/i, "");
    var funcName = hrefVal.substring(0, hrefVal.indexOf('(') - 1);
    var args = hrefVal.substring(hrefVal.indexOf('('), hrefVal.index(')') - 1);
    args = args.split(',');
    if(funcName in operations){
         operations[funcName].apply(window, args);
    }

}
}

May be i am making this complex. But i will not use eval .

I Hope this helps.