web-dev-qa-db-ja.com

jQuery .click（）はSafariを除くすべてのブラウザーで動作します

既存のdiv内にAタグを動的に作成し、jQuery関数を「クリック」して呼び出すJavaScriptがあります。これは、Safariを除くすべてのブラウザーで意図したとおりに機能します。

Safariは次のエラーを返します。

'undefined'は関数ではありません（ '$（'。Shell a '）[0] .click（）'を評価します）

私が間違っていることや、なぜこれがSafariで機能しないのか、それを機能させる方法（またはすべてのブラウザで機能するコードの一部）に関するアイデアは、.trigger("click")をまあ、それは同じエラーを与えます。

JavaScript

function writeAndClickLink(url) {

    $('.Shell').html('<a href="' + url + '"></a>');
    $('.Shell a')[0].click();
}

およびHTMLで：

<div class="Shell"></div>

この奇妙な方法でやっている理由は、Twitterサイトを開くためにFlashサイトから関数が呼び出され、そこでツイートに対して報酬を与えているからです。これまでのところ、ウィンドウにバインドする「Tweet」イベントを取得できる唯一の方法でした。他の方法（window.openなど）でウィンドウを開くと、実際にツイートを完了したことを知らせるバインドされたイベントをキャプチャしません。

フローは次のようなものです。

  • ユーザーがフラッシュの[ツイート]ボタンをクリックする
  • Flashはjavascript関数を呼び出して、hrefを動的に記述し、「クリック」します
  • Twitterウィンドウが開きます
  • ユーザーがツイートに成功しました
  • ツイートイベントがキャプチャされ、成功するとフラッシュが更新されます
  • コンテンツはフラッシュでロック解除されます
javascriptjquerysafariclick
33
Scott
var a = $('.Shell a')[0];
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
a.dispatchEvent(evObj);

http://www.howtocreate.co.uk/tutorials/javascript/domevents （「手動でイベントを起動する」を検索）を参照してください。

34
Trevor Dixon

Trevor Dixonの答えは修正しますSafariを修正しますが、最新のFirefoxでも壊れます：

TypeError：MouseEvent.initMouseEventの引数が不足しています

Firefoxを壊さずにSafariをサポートする最良の方法は、次のようにinitEventの代わりにinitMouseEventを使用することです。

var element = document.getElementById('your_id_here');
if(element.click)
    element.click();
else if(document.createEvent)
{
    var eventObj = document.createEvent('MouseEvents');
    eventObj.initEvent('click',true,true);
    element.dispatchEvent(eventObj);
}

2016年に更新するには、非推奨のMouseEventの代わりに initMouseEvent を使用する必要があります。

var eventObj = new MouseEvent("click", {
    bubbles: true,
    cancelable: true
});
element.dispatchEvent(eventObj);
8
Alex W

$('.Shell a')[0]は、jQueryオブジェクトからDOMオブジェクトを取得します。そのDOMオブジェクトにはDOMメソッドのみがあり（jQueryメソッドではありません）、HTML5までは_<a>_要素に業界標準の.click()メソッドがなく、すべてのブラウザーにまだ実装されていません-したがって、異なるブラウザ間での不完全な実装。

いくつかの選択肢があります。最初のオプションはjQueryオブジェクトを取得し、jQueryオブジェクトで.click()メソッドを使用します。これは、_<a>_タグのデフォルトのクリックだけが必要な場合ではなく、jQueryクリックハンドラーをトリガーする場合にのみ確実に機能します。

_function writeAndClickLink(url) {

    $('.Shell').html('<a href="' + url + '"></a>');
    $('.Shell a').eq(0).click();
}
_

または、URLをクリックするだけで新しいWebページに移動する場合は、DOMを変更するだけで、window.locationを設定するだけで、DOMを変更する意味はまったくないので、新しいWebページ：

_function writeAndClickLink(url) {
    window.location = url;    
}
_
6
jfriend00

$('.Shell a')[0]は、jQueryメソッドがバインドされていないネイティブDOM要素を返します

「[0]」を削除して、jQueryメソッドを使用するためにjQueryオブジェクトを保持します

 $('.Shell a').click()
3
charlietfl