jQuery not firing click even when directed to on document load?

Question

I am wringing a color picker since I couldn't find one with the feature I want (you'd think by now all possible features would have been included, but I couldn't find one that supported RGBA output with an adjustable alpha level) and I'm having issues with the part of the script that will load the current color when the editor is started. I won't bore you with all the code, I'll try to keep it to the basics.

First, all of this is inside a standard $(docuemnt).ready(), the fist thing it does is replace inputs with my color selector code, then it tries to run the set_color function.

    $('.rgbapicker').each(function(){
        $(this).replaceWith(
            'This is all the display code, it's working fine.'
        )
        set_color('#'+$(this).attr('name')+' ',$(this).val())
    });

The set_color function takes the selected variable, which controls which color picker your using and the color, which is converted using tinycolor.js - a modified version that passes rgb alpha through the toRgb() function (as opposed to only passing it in the .toRgbString() function).

    function set_color(selected,color){
        var color = tinycolor(color).toRgb();
        $(selected+'.disp_s_color_r').val(color.r); // This code
        $(selected+'.disp_s_color_g').val(color.g); // Changes the
        $(selected+'.disp_s_color_b').val(color.b); // Color selector
        $(selected+'.disp_s_color_a').val(color.a); // Display
        var color = tinycolor(color).toHsl();
        console.log(selected+' - '+color.h+' - '+color.s+' - '+color.l);
        var e = new jQuery.Event("click");
        e.pageX = 180;
        e.pageY = 180;
        $('.colorbase').trigger(e);

The editor uses a hsl spectrum image that you click on, which then gets the mouse coordinated and does the math to figure it all out, it's a very basic method and works fine. When I click on the editor it updates properly (that doesn't use anything writen here), when I hit my reset button it fires of this function and works correctly (the XY of the selection area it updates, highlighting the color you selected) but when this is loaded in that initial loop it doesn't fire. The set_color function runs, and updates the in editor display, but the selector doesn't move, and since that click function is what updates all the previews and the color that is written to the (not hidden) input none of that is updated.

There is no difference between the initial post-replace loop call and the reset buttons call, I even checked the events and there exact copies of each other (I copied them into another program and ran a compare, they are exact copies). I've tried the ideals posted in other similar messages here (and elsewhere when googling the issue), including having the loop simulate the click on the reset button, but nothing has worked.

Any ideas? I'd love to just get the click to properly fire, otherwise it'll be a chuck of code to simulate a click that will do nothing but make the script bigger (it's not exactly trim right now).

Answer 1

You have a typo;

    $(this).replaceWith(
        "This is all the display code, it's working fine." // all singlequotes before
    )

Answer 2

Since e is a window / document Event, should you not fire it on the document instead on the color picker?

As seen on jQuery API there are two mistakes:

• don't create the event with the "new" keyword
• Trigger event on the body element

Answer 3

尝试转义replaceWith字符串中的撇号。