为什么需要双击第一次加载jquery?

时间:2016-10-26 07:34:25

标签: jquery angularjs

当我尝试在按钮上打开弹出窗口时,它在第一次单击时未打开。 我使用带有Angular js的J Query在按钮点击时打开右侧弹出窗口,但是我遇到打开它的问题。按钮点击事件我写了这段代码。

当我点击此按钮<a type="button" class="btn border-button cd-btn" ng-click="Bookservice(item)">Book</a>

$scope.Bookservice=function(item)
{
     $('.cd-btn').on('click', function(event){
       event.preventDefault();
       $('.cd-panel').addClass('is-visible');
     });
     //clode the lateral panel
     $('.cd-panel').on('click', function(event){
     if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
        $('.cd-panel').removeClass('is-visible');
        event.preventDefault();
      }
   });
}

和弹出代码类似

<div class="cd-panel from-right">
    <a href="#0" class="cd-panel-close">Close</a>
    <div class="cd-panel-container">
        <div class="cd-panel-content">

从这段代码我尝试打开弹出窗口,当我点击按钮时,它使用我以前编写的代码,但是当我第二次点击按钮时,它在第一次点击时没有打开,打开弹出窗口。所以,我希望我的弹出窗口必须在页面加载后第一次打开时打开。

谢谢

3 个答案:

答案 0 :(得分:1)

$scope.Bookservice=function(item)
{
     $('.cd-btn').on('click', function(event){
       event.preventDefault();
       if(!$(this).hasClass("is-visible"))
         $('.cd-panel').addClass('is-visible');
       else
         $('.cd-panel').removeClass('is-visible');
     });
     //clode the lateral panel

   }

并在您的视图中使用ng-click

答案 1 :(得分:1)

您在调用Bookservice(item)时附加点击事件。

$('.cd-panel').addClass('is-visible');放入Bookservice函数中。

$scope.Bookservice=function(item)
{
     $('.cd-panel').addClass('is-visible');
     //clode the lateral panel
     $('.cd-panel').on('click', function(event){
     if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
        $('.cd-panel').removeClass('is-visible');
        event.preventDefault();
      }
   });
}

答案 2 :(得分:0)

与DOM操作相关的逻辑不应该写在控制器的$ scope函数中,我想你是这样做的,请创建指令来显示弹出并实现DOM操作的逻辑,这个链接Open custom Pop up in Angular有适合您的问题的实施方法