jquery-mobile - jquery 中的事件目标随机变化

Question

我在 ul 中有多个超链接，我想捕获对超链接的点击

div的结构如下，

<div style="margin:3%;" id="city-list">
        <ul data-role="listview" data-theme="b"  data-filter="true" data-filter-placeholder="Filter Cities...">
            <?php foreach($cities as $city): ?>
            <li>
                <a id="city_<?php echo $city['city_id'] .'_'. $city['city_name']?>" href="#">
                    <span style="font-size: 14px;"><?php echo $city['city_name']; ?></span><br/>
                </a>
            </li>
            <?php endforeach; ?>
            <li class="no-results" style="display:none;">No results found.</li>
        </ul>
    </div>

捕获点击的 jQuery 代码如下，

$("#city-list").delegate('a','click', function(event) {
    event.preventDefault();
     //       console.log(event.target);
    var city_id = event.target.id,
    service_type = "<?php echo $service_type; ?>";
    JE.search_regions(city_id, service_type);
    $.cookies.set('city_id', city_id);
});

这在大多数情况下都有效，除了某些随机时间。

此时，event.target 是a 标记内的span。我不知道为什么会发生这种情况。

请帮我调试一下。

Answer 1

e.target 是实际单击的元素，因此如果单击 span 元素，e.target 将是 span 元素，但点击会向上冒泡到父元素，因此即使该函数附加到父元素，该函数仍然会运行，这是很自然的，因为 span 位于 内部a，点击 span 也是点击 a 元素，但 e.target 将准确识别什么元素实际上收到了点击。

要引用 a 元素，请使用 this 关键字，它将引用绑定(bind)元素，在本例中为 a 元素。