为什么在 Mozilla Firefox 中正常运行的 jQuery Colorbox 在以下情况下无法在 Google Chrome 中运行？

Question

我的 HTML 和 jQuery 代码如下。这在 Mozilla Firefox 中可以正常运行，但在 Google Chrome 中无法正常运行：

<select name="select_option">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!-- The following four popups are not getting displayed when there is a call for them -->
<div class="hidden">
  <div id="deletePopContent" class="c-popup">
    <h2 class="c-popup-header">Delete Users</h2>
    <div class="c-content">         
      <h3>Are you sure to delete selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="disablePopContent" class="c-popup">
    <h2 class="c-popup-header">Disable Users</h2>
    <div class="c-content">         
      <h3>Are you sure to disable selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="disable_url">Disable</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="updatePopContent" class="c-popup">
    <h2 class="c-popup-header">Update Class and Section</h2>
      <div class="c-content">         
        <h3>Are you sure to update class and section for selected users?</h3>
        <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
        <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="update_url">Update</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="defaultPopContent" class="c-popup">
    <h2 class="c-popup-header">Change Password</h2>
    <div class="c-content">         
      <h3>Are you sure to change password?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="default_url">Change</a> 
    </div>
  </div>
</div>
<!-- Only this eorror popup is getting displayed when there is a call to it-->  
<div class="hidden">
  <div id="errmsg" class="c-popup">
    <h2 class="c-popup-header">Error</h2>
    <div class="c-content">         
      <h3>Please select at least one user</h3>
      <a href="#"class="c-btn">Ok</a>
    </div>
  </div>
</div>

Javascript：

$(document).ready(function() { 
  $('select[name="select_option"]').change(function(e) {
    e.preventDefault();
    $(this).clearQueue(); 
    var checkedUsers = $('div .ez-checked input').length;    
    if(checkedUsers == 0) {       
      $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
      $.colorbox({inline:true, width:444, href: "#errmsg"});
      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });
      return false;
    } else { 
      if($("#ckbCheckAll").hasClass('ez-checked')) { 
        var childchklen = $('div .ez-checked input:not(#ckbCheckAll)').length;        
        if(childchklen == 0) {          
          $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
          $.colorbox({inline:true, width:444, href: "#errmsg"});
          $(".c-btn").bind('click', function(){
            $.colorbox.close();
          });
          return false;
        }
      }

      var classname = $('select[name="select_option"]')
        .find(':selected').attr('class');
/*Here I'm giving the call to corresponding colorbox. It's working fine in Firefox but not in chrome*/
      $('.'+classname).colorbox({inline:true, width:666});

      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });              
    }      
  });
});

我在控制台中也没有发现任何错误。我试图通过在调用 colorbox 期间使用硬编码的类名来解决这个问题，但它仍然没有被调用/显示。 任何人都可以帮助我使这个东西在谷歌浏览器中可用吗？提前致谢。

Answer 1

这里有一些问题：

• <option> 元素没有属性 href；请改用value
• 您在 .classname（例如 .delete_user）上调用 colorbox，这是一个 <option> 元素，而不是您要显示的 div
• 您在不工作的情况下使用的语法似乎有问题：虽然有记录，但不能按预期工作；使用之前使用的 href 回退到 $.colorbox()

解决了上述问题后，我可以正常工作了。 Demo here.