Angular jQuery点击事件应双击要工作

发布于 2025-02-12 14:25:22 字数 3812 浏览 3 评论 0原文

我有一个用jQuery和bootstrap实现的管理面板，当我在angular中使用它时，它可以正常工作。

安装jQuery和bootstrap on Angular和配置它们，我应该双击“项目

您可以看到此链接作为演示，单击标题按钮

源代码 on github

angular.json.json：

...
"options": {
  "outputPath": "dist/frontend",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "node_modules/bootstrap/dist/css/fonts/icomoon/styles.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/bootstrap/dist/css/bootstrap_limitless.min.css",

    "node_modules/bootstrap/dist/css/layout.min.css",
    "node_modules/bootstrap/dist/css/components.min.css",
    "node_modules/bootstrap/dist/css/colors.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
    "src/assets/js/app.js"
  ]
},
...

index.html：

<!doctype html>
<html lang="en" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>salam</title>

  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>
</body>
</html>

packages.json

...
"dependencies": {
  "@angular/animations": "^14.0.0",
  "@angular/common": "^14.0.0",
  "@angular/compiler": "^14.0.0",
  "@angular/core": "^14.0.0",
  "@angular/forms": "^14.0.0",
  "@angular/platform-browser": "^14.0.0",
  "@angular/platform-browser-dynamic": "^14.0.0",
  "@angular/router": "^14.0.0",
  "bootstrap": "^4.6.1",
  "icomoon": "^1.0.0",
  "jquery": "^3.6.0",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},
...

简化app.js as jQuery实现：

var App = function () {

  var _dropdownSubmenu = function() {

    // All parent levels require .dropdown-toggle class
    $('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').on('click', function(e) {
      e.stopPropagation();
      e.preventDefault();

      // Remove "show" class in all siblings
      $(this).parent().siblings().removeClass('show').find('.show').removeClass('show');

      // Toggle submenu
      $(this).parent().toggleClass('show').children('.dropdown-menu').toggleClass('show');

      // Hide all levels when parent dropdown is closed
      $(this).parents('.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show, .dropdown-submenu.show').removeClass('show');
      });
    });
  };


  return {
    initDropdownSubmenu: function() {
      _dropdownSubmenu();
    },


    // Initialize core
    initCore: function() {
      App.initDropdownSubmenu();
    }
  };
}();


// Initialize module
// ------------------------------

// When content is loaded
document.addEventListener('DOMContentLoaded', function() {
  App.initBeforeLoad();
  App.initCore();
});

// When page is fully loaded
window.addEventListener('load', function() {
  App.initAfterLoad();
});

原文

I have a admin panel which implemented with jQuery and Bootstrap and it works fine when I use that out of Angular.

after installing jQuery and Bootstrap on Angular and config them I should double click on items to work

you can see this link as a demo, click on header buttons

SOURCE CODE on github

angular.json:

...
"options": {
  "outputPath": "dist/frontend",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "node_modules/bootstrap/dist/css/fonts/icomoon/styles.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/bootstrap/dist/css/bootstrap_limitless.min.css",

    "node_modules/bootstrap/dist/css/layout.min.css",
    "node_modules/bootstrap/dist/css/components.min.css",
    "node_modules/bootstrap/dist/css/colors.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
    "src/assets/js/app.js"
  ]
},
...

index.html:

<!doctype html>
<html lang="en" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>salam</title>

  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>
</body>
</html>

packages.json

...
"dependencies": {
  "@angular/animations": "^14.0.0",
  "@angular/common": "^14.0.0",
  "@angular/compiler": "^14.0.0",
  "@angular/core": "^14.0.0",
  "@angular/forms": "^14.0.0",
  "@angular/platform-browser": "^14.0.0",
  "@angular/platform-browser-dynamic": "^14.0.0",
  "@angular/router": "^14.0.0",
  "bootstrap": "^4.6.1",
  "icomoon": "^1.0.0",
  "jquery": "^3.6.0",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},
...

simplified app.js as jQuery implementation:

var App = function () {

  var _dropdownSubmenu = function() {

    // All parent levels require .dropdown-toggle class
    $('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').on('click', function(e) {
      e.stopPropagation();
      e.preventDefault();

      // Remove "show" class in all siblings
      $(this).parent().siblings().removeClass('show').find('.show').removeClass('show');

      // Toggle submenu
      $(this).parent().toggleClass('show').children('.dropdown-menu').toggleClass('show');

      // Hide all levels when parent dropdown is closed
      $(this).parents('.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show, .dropdown-submenu.show').removeClass('show');
      });
    });
  };


  return {
    initDropdownSubmenu: function() {
      _dropdownSubmenu();
    },


    // Initialize core
    initCore: function() {
      App.initDropdownSubmenu();
    }
  };
}();


// Initialize module
// ------------------------------

// When content is loaded
document.addEventListener('DOMContentLoaded', function() {
  App.initBeforeLoad();
  App.initCore();
});

// When page is fully loaded
window.addEventListener('load', function() {
  App.initAfterLoad();
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜空下最亮的亮点 2025-02-19 14:25:22

我想您需要删除document.addeventListener（'domcontentloaded'，function（）{} us在ngafterviewinit或您的组件中，当您需要

在组件中

declare var App

ngAfterViewInit()
{
  App.initBeforeLoad();
  App.initCore();
}

调用此函数时，但是通常想法混合角和jQuery

I imagine that you need remove the document.addEventListener('DOMContentLoaded', function() {} and Is in ngAfterViewInit or your components when you need call to this functions

In your component

declare var App

ngAfterViewInit()
{
  App.initBeforeLoad();
  App.initCore();
}

But in general is a bad idea mix Angular and jQuery

回复收藏 0 原文

鹿! 2025-02-19 14:25:22

您可以Unbind单击事件，bind再次使其正常工作：

$('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').unbind('click').bind('click', function (e) {
    // yourCode
});

You can unbind click event and bind it again to make it work properly:

$('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').unbind('click').bind('click', function (e) {
    // yourCode
});

回复收藏 0 原文

~没有更多了~