为什么 onClick() 在 Chrome 浏览器上不起作用？ [复制]答案

【问题标题】：Why onClick() is not working on Chrome Browser? [duplicate]为什么 onClick() 在 Chrome 浏览器上不起作用？ [复制]
【发布时间】：2015-04-14 16:37:38
【问题描述】：

当 html 选择选项发生变化时，我正在使用 onClick() 方法调用函数。它在 Mozilla Firefox 中运行良好，但为什么它在 Chrome Broser 上无法运行？

<select name="project_list" class="project_list">
    <option>--Select Project--</option>        
    <?php 
    $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
    while($list=mysqli_fetch_array($getProjectList)){
        $list_p_id = $list['p_id'];
        $list_p_name = $list['p_name'];
      ?>
        <option onclick="showProjectDetails(<?php echo $list_p_id; ?>);"><?php echo $list_p_name; ?></option>";
    <?php
    }
    ?>

注意：此 onclick() 方法从 html 选项更改中获取 id 值并传递给showProjectDetails()

更新：

<table border="0" cellpadding="0" cellspacing="0" width="570">
<tr>
  <td width="142">Project</td> 
  <td><input type="text" id="project_name" name="p_name" value="<?php echo $p_name; ?>" /></td>
    <td colspan="1" align="right">
    <select name="project_list" class="project_list">
      <option>--Select Project--</option>  
      <?php 
      $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
      while($list=mysqli_fetch_array($getProjectList)){
          $list_p_id = $list['p_id'];
          $list_p_name = $list['p_name'];
          ?>
          <option onclick="showProjectDetails(<?php echo $list_p_id; ?>);"><?php echo $list_p_name; ?></option>";
          <?php
      }
      ?> 
    </select>
    </td>
    <td>
      <a href="#" class="normalSearch">Normal Search</a> <br> <a href="#" class="advanceSearch">Advanced search</a>
    </td>
</tr>
<tr>  
  <td width="142">For</td> 
  <td colspan=""><input type="text" id="project_company" name="company_name" value="<?php echo $p_c_name; ?>" /></td>
  <td></td>  
</tr>
</table>

更新 2：

function showProjectDetails(e){
var id = $(e).val();
$.ajax({
type:"post",
url:"showProjectDetails.php",
data:"id="+id,
    success:function(res){        
        $('#showProjectForm').html(res);        
    }
}); 
}

【问题讨论】：

控制台有错误吗？您是否尝试将 php echo 用引号括起来？
@tymeJV no ti 没有在控制台上显示任何错误。
你能用你的PHP显示实际生成的HTML吗？
该选项无法接收点击，需要将事件附加到select元素

标签： jquery

【解决方案1】：

您需要将该函数附加到 select 标签而不是 option 标签。试试这个：

<select name="project_list" class="project_list" onchange="showProjectDetails(this);">
    <option>--Select Project--</option>        
    <?php
    $getProjectList = mysqli_query($link, "SELECT p_id, p_name FROM projects WHERE p_owner_id = '$logged_user_id' ");
    while ($list = mysqli_fetch_array($getProjectList)) {
        $list_p_id = $list['p_id'];
        $list_p_name = $list['p_name'];
        ?>
        <option value="<?php echo $list_p_id; ?>"><?php echo $list_p_name; ?></option>";
        <?php
    }
    ?> 
</select>
<script>
    function showProjectDetails(e) {
        var val = $(e).val();
        alert(val);
    }
</script>

【讨论】：

嘿，当我更改第一个选项时它正在工作，但是当更改第二个选项时，我在控制台日志中看到以下错误：TypeError: e.nodeName is undefined ..."value")||(this.value=e))});if(e)return b=m.valHooks[e.type]||m.valHooks[e.nodeN...
我的意思是第二次没有调用函数。
好的，让我再看看
您可以在主要问题中添加showProjectDetails 函数的内容吗？
我加了检查一下。

【解决方案2】：

我认为<option> 元素无法获得点击。见this fiddle。单击选项不会产生任何效果。

您想查看<select> 元素的变化：

$('select.project_list').on('change', function() {
  alert( this.value ); // or $(this).val()
});

【讨论】：

是的，chrome 不支持<option> 元素上的点击事件
我无法获得用于测试目的的警报
但它有效：jsfiddle.net/tq56jz0a/1