click trigger() not working when page loads-CodePudding

I am trying to make a trigger work based on the query string of the URL I use this code to get URL string

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

  for (i = 0; i < sURLVariables.length; i  ) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
      return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
};

and once I get it I put it inside an if then else like so:

$(document).ready(function () {
  let code_para = getUrlParameter("code");

  if (code_para == "one") {
    $("#one").trigger('click');
  } else if(code_para == "two") {
    $("#two").trigger('click');
  } else if(code_para == "three") {
    $("#three").trigger('click');
  } else if(code_para == "four") {
    $("#four").trigger('click');
  } else if(code_para == "five") {
    $("#five").trigger('click');
  } else {
    //do nothing
  }
});

but the problem is the trigger part is not working I have attached a fiddle for the full code Fiddle

CodePudding user response：

Your issue is that clicking on #three (for example) does nothing (based on the provided fiddle).

So triggering the click, does nothing.

It's not (just) that it's too early, because the other bindings (hover and click) are on .box3, not #three. You need to trigger on .box3, eg:

$(()=> $(".box3").trigger('mouseover').trigger("click") )

So your (switch) would need to convert:

if (code_para == "one") {
    $(".box1").trigger('mouseover').trigger("click")

CodePudding user response：

couple of suggestions - you could simplify your logic and simply use the code_para as the identifier on the selector (assuming that the code_para is actually the same as the id of the element you want to click. Not the else block remains to do something in the avbsence of code_para).

 $(document).ready(function () {
        let code_para = getUrlParameter("code");
       if (code_para)
       {
           $("#"   code_para).trigger('click');
       } else {
           //do nothing
       }
    });

But rather than triggering a click on another DOM element - I would trigger the function that the click causes - so if these items have a function on the click - then i would simply trigger the function directly - rather than stimulating a click event that then triggers the fucntion....