子div内にキャプチャされなかったクリックイベント

Question

基本HTML、CSS、JQueryを使用してリストコンポーネントを試してみました。クリックイベントでリスト項目を選択したい。リストアイテムのテキスト（padding space）の周りのスペースをクリックすると、クリックイベントがキャプチャされます。しかし、テキストをクリックすると（file-name div全体のスペースも）、クリックイベントはキャプチャされません。内部の子供のdivのためかもしれない？どんな助けもありがとう。ありがとう。

function selectFile(id, key) { 
 
    if($(id).hasClass('selected')) { 
 
    $(id).removeClass('selected'); 
 
    } else { 
 
    $(id).addClass('selected'); 
 
    } 
 
} 
 

 
$('.file-list-section').on('click', function(event) { 
 
    selectFile('#'+event.target.id, event.target.dataset.key); 
 
})

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg=""> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>

Answer 1

function selectFile(id, key) { 
 
    if($(id).hasClass('selected')) { 
 
    $(id).removeClass('selected'); 
 
    } else { 
 
    $(id).addClass('selected'); 
 
    } 
 
} 
 

 
$('.file-list-section .file-row').on('click', function(event) { 
 

 
    selectFile('#'+$(this).attr('id'), $(this).data('key')); 
 
})

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree copy.jpeg"> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>

Answer 2

あなたは結合事象のためfile-rowを対象とし、所望の動作を実行するためにthisを使用する必要があります。

function selectFile() { 
 
    $(this).toggleClass('selected'); 
 
    
 
    console.clear(); 
 
    console.log($(this).data("key"), $(this).find('.file-name').text()); 
 
} 
 

 
$('.file-list-section').on('click', '.file-row', selectFile)

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 

 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg=""> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>

Answer 3

あなたのコードではなく、個別に各リスト項目を扱うのリスト全体のクラスに焦点を当てました。 jQueryを単純化して、 "this" .file-rowをクリックすると、Selectedが選択されたクラスをトグルします。これにより、複数の項目をハイライトできます。一度に1つだけ必要な場合は、クリックごとに「選択された」クラスをすべてクリアします。

$('.file-row').removeClass('selected'); 
 

 
$('.file-row').click(function(){ 
 
$(this).toggleClass('selected'); 
 
})

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg=""> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>

Answer 4

あなたはイベントのあなたの通過には狭すぎる..です以下で

function selectFile(id, key) { 
 
    if($(id).hasClass('selected')) { 
 
    $(id).removeClass('selected'); 
 
    } else { 
 
    $(id).addClass('selected'); 
 
    } 
 
} 
 

 
$('.file-list-section .file-row').on('click', function(event) { 
 
    selectFile('#'+$(this).attr('id'), $(this).data('key')); 
 
})

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg=""> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>

Answer 5

をスクリプトを更新 - 代わりにイベントハンドラを追加しますキーで区切る

はまた、代わりにクラスをテストするためのクラスを切り替える：

$('.file-row').on('click', function(e) { 
 
    $(this).toggleClass('selected'); 
 
    console.log($(this).data("key")) 
 
});

.file-row { 
 
    padding: 10px; 
 
    border-bottom: 1px solid lightgray; 
 
    cursor: pointer; 
 
} 
 
.file-list-section .file-row.selected { 
 
    background: #26a69a; 
 
    color: white; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<div id="fileList" class="file-list-section"> 
 
    <div class="file-row" id="fileId_0" data-key="cd58ef701e28f6df8.jpg"> 
 
    <div class="file-name">cd58ef701e28f6df8.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_1" data-key="a682e06e25c5c86.jpg"> 
 
    <div class="file-name">a682e06e25c5c86.jpg</div> 
 
    </div> 
 
    <div class="file-row" id="fileId_2" data-key="Jefree" copy.jpeg=""> 
 
    <div class="file-name">Jefree copy.jpeg</div> 
 
    </div> 
 
</div>