3

なぜこれが機能しないのですか？ラベルは.item親の内側にあります。有効ではないので、ブロック要素の外に置きたくありません。

だから私はラベルクリックをシミュレートしようとしています：

$(".item").click(function(){
    $(this).find("label").click();
});

編集：ラベルをトリガーしてラジオをチェックすることになっています。

<script type="text/javascript">
    $(document).ready(function () {
        $(".item").click(function() {
            $(this).find("label").click();
        });
    }); 
</script>


<div class="item">
    <h4>Item</h4>
    <ul>                
        <li>Description</li>
    </ul>
     <div class="radio-container">
        <div class="radio-stack">
            <input type="radio" class="styled" id="item1">
        </div>
        <label for="item1">$100</label>
    </div>
</div>
4

3 に答える 3

5

このラベルは（for属性を使用して）いくつかの入力に添付されているため、次のように試すことができます。

var inputID = $(this).find("label").attr("for");
$('#' + inputID).click();

ただし、注意が必要です。入力はクラスのdiv内.itemにあるため、ラジオのクリックをシミュレートすると、カスタムハンドラーが再度トリガーされ、無限ループが発生します。可能であれば、クリックをシミュレートする代わりに、radiochecked属性をに設定するだけです。true

$('#' + inputID).attr("checked",true);

（jsFiddleでの作業例）

.itemそれ以外の場合は、その無限ループを回避するために、セレクターからその無線を除外する方法を見つける必要があります。

更新：セレクターで少し苦労した後not、失敗しましたが、すばやく汚いハックを思いつきました：グローバル（readyクロージャーまで）変数を使用して、シミュレートされたクリックが発生するかどうかを制御します：

var updating = false;
$(".item").click(function() {
    if ( !updating ) {
        var inputID = $(this).find("label").attr("for");
        updating = true;
        $('#' + inputID).click();
        updating = false;
    }
});

ここでの実例。IMO Ayman Safadiの答えの方が優れていますが、クロスブラウザーで機能させるのに問題がある場合は、この代替手段を出発点として使用できます。

于 2012-06-07T06:46:11.613 に答える
2

あなたの質問に厳密に答えるために、それは「クリック」の無限ループを引き起こしているので機能していません、そしてあなたのブラウザはただ静かにイベントを殺します。

このデモを実行し、JSコンソールを確認します：http：//jsfiddle.net/bRyR3/

クリックイベントdivをキャプチャしています。labelつまり、JavaScriptはロジックを次のように解釈します。

をクリックすると、 「」イベント.itemがトリガーされます。labelclick

labelは内部.itemにあるため、labelクリックすると、も同様になります.item。

をクリックすると、 「」イベント.itemがトリガーされます。labelclick

labelは内部.itemにあるため、labelクリックすると、も同様になります.item。

をクリックすると、 「」イベント.itemがトリガーされます。labelclick

labelは内部.itemにあるため、labelクリックすると、も同様になります.item。

等...

実際の解決策に取り組んでいます。

解決

$('.item').on('click', function(e) {
    console.log('click');
    $('label', $(this)).trigger('click');
});

$('.item label').on('click', function(e) {
    e.stopPropagation();
});

これにより、のイベントの.itemキャプチャが停止します。labelclick

作業デモ： http： //jsfiddle.net/bRyR3/1/

于 2012-06-07T07:08:29.487 に答える
0

この質問と回答は解決策を探すときにポップアップするので、この問題を解決する3番目の方法があります。

JQueryでは、trigger（）を使用して、カスタムパラメーターをon（）イベントハンドラーに送信できます。

https://api.jquery.com/trigger/を参照してください

つまり、現在のイベントが「人工」であることをイベントハンドラーに通知するだけで、無限のループを回避できます。

$( document ).on( 'click touch', '.item', function( event, artificial ) {
     if( artificial ) return;
     
     $(this).find("label").trigger( 'click', [ true ] );
} );

これには、伝播を停止しない（またはそれに依存しない）と同時に、さまざまな入力タイプ（チェックボックス、ラジオ、テキストなど）をいじくり回さないという利点があります。ラベルのクリックをシミュレートするだけで、追加の作業や無限ループは発生しません。

于 2020-09-17T09:50:39.467 に答える