JQuery для инъекций click()

Question

В настоящее время я создаю расширение для браузера, которое внедряет javascript/jquery в определенные страницы, и у меня возникла странная проблема: .click() события не работают из моего введенного кода. Странно, что он работает совершенно нормально, если я звоню с консоли js console.

Я не очень понимаю, в чем проблема. Кажется, что все мои другие звонки работают нормально. Я могу связать, чтобы нажать события, используя .click(function(){...}) (так ясно, что мой jquery был загружен правильно) и вызывает методы, когда что-то щелкает (так ясно, что мой jquery был загружен правильно), но во-вторых, когда я пытаюсь вызвать щелчок, вызов просто не проходит.

Кто-нибудь может объяснить, что происходит, или как я могу обойти это?

(Я не могу воссоздать эту проблему, потому что проблема явно связана с внедрением js в расширение)

это лучшее, что я могу сделать для отдыха:

//I have tried all of these separately 
console.log($("#this_is_an_id"))  //This returns the correct element

$("#this_is_an_id").click()       //This does not work at all

$("#this_is_an_id").trigger("click") //I have also tried this without success

$("#this_is_an_id").click(function(){ console.log("stuff") }) //This works fine.

На самом деле, на данный момент, я предполагаю, что это не моя вина, а что-то не так с браузерным методом внедрения скрипта. Я ищу действительно хоккейные способы исправить это, я также попробовал eval('$("#this_is_an_id").trigger("click")'), У кого-нибудь есть другие предложения?

Answer 1

Я наконец нашел очень хороший ответ / обойти эту проблему здесь: Запустить события из расширения браузера Firefox?

От пользователя CMS:

Прежде всего, для событий щелчка необходимо создать объект события с типом MouseEvents, а не HTMLEvents, и использовать event.initMouseEvent вместо event.initEvent.

Чтобы получить доступ к документу текущей вкладки Firefox из оверлея XUL, вы можете использовать свойство content.document, но, поскольку у вас уже есть доступ к элементу DOM, который вы хотите щелкнуть, вы можете использовать свойство Node.ownerDocument, которое будет обратитесь к объекту документа верхнего уровня для этого узла.

Я сделал простую функцию для моделирования MouseEvents:

function triggerMouseEvent(element, eventName, userOptions) {
  var options = { // defaults
    clientX: 0, clientY: 0, button: 0,
    ctrlKey: false, altKey: false, shiftKey: false,
    metaKey: false, bubbles: true, cancelable: true
     // create event object:
  }, event = element.ownerDocument.createEvent("MouseEvents");

  if (!/^(?:click|mouse(?:down|up|over|move|out))$/.test(eventName)) {
    throw new Error("Only MouseEvents supported");
  }

  if (typeof userOptions != 'undefined'){ // set the userOptions
    for (var prop in userOptions) {
      if (userOptions.hasOwnProperty(prop))
        options[prop] = userOptions[prop];
    }
  }
  // initialize the event object
  event.initMouseEvent(eventName, options.bubbles, options.cancelable,
                       element.ownerDocument.defaultView,  options.button,
                       options.clientX, options.clientY, options.clientX,
                       options.clientY, options.ctrlKey, options.altKey,
                       options.shiftKey, options.metaKey, options.button,
                       element);
  // dispatch!
  element.dispatchEvent(event);
}

Использование: triggerMouseEvent(element, 'click');

Проверьте использование теста здесь.

Вы также можете передать объект в качестве третьего аргумента, если хотите изменить значения свойств объекта события.

Большое вам спасибо за этот ответ. О_О