click方法不生效的

最新推荐文章于 2024-04-26 17:27:04 发布
最新推荐文章于 2024-04-26 17:27:04 发布
阅读量3.8k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanhongwei1994/article/details/88720500
版权

 


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片上传</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/plugins/weui/css/weui.css"/>
    <link rel="stylesheet" href="/plugins/weui/css/weuix.css"/>


    <script src="/plugins/weui/js/jquery-2.1.4.js"></script>
    <script src="/plugins/weui/js/zepto.min.js"></script>
    <script src="/plugins/weui/js/zepto.weui.js"></script>
    <script src="/plugins/weui/js/lrz.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script>

        $(function(){

            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
            var      $uploaderInput = $("#uploaderInput"); //上传按钮+
            var       $uploaderFiles = $("#uploaderFiles");    //图片列表
            var $galleryImg = $(".weui-gallery__img");//相册图片地址
            var $gallery = $(".weui-gallery");
            $uploaderInput.on("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];

                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }

                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                    document.getElementById("upload").style.display = 'none';
                }
            });
            $uploaderFiles.on("click", "li", function(){
                $galleryImg.attr("style", this.getAttribute("style"));
                console.log(this);
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function(){
                $gallery.fadeOut(100);
            });
            //生效
          /*  $('#submit_button').on('click', function(){
                alert("提交中");
            });*/
        });

        //提交 不生效
        $('#submit_button').on('click', function(){
            alert("提交中");
        });




    </script>
</head>

<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        图片上传和预览压缩
    </h1>
    <p class="page-hd-desc">需要加载lrz.min.js压缩插件</p>
</div>

<div class="page-bd-15">
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">图片预览</p>
            <div class="weui-uploader__info">0/1</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles">
            </ul>
            <div class="weui-uploader__input-box" id="upload">
                <input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
            </div>
        </div>
    </div>

    <div class="weui-gallery" style="display: none">
        <span class="weui-gallery__img"></span>
        <div class="weui-gallery__opr">
        </div>
    </div>


    <div class="page__bd page__bd_spacing">
        <a href="javascript:void(0);" id="submit_button" class="weui-btn weui-btn_primary">提交</a>
    </div>





</div>
<br>
<br>
<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="../index.html" class="weui-footer__link">WeUI首页</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; xiaobu</p>
</div>
</body>
<script>
    //提交  生效
   /* $('#submit_button').on('click', function(){
        alert("提交中");
    });*/
</script>
</html>

注:需要把js方法放在下面或者放在onload方法里面才会执行。放在head里面有可能出现,js加载了但是dom节点没有加载。

小布2025
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IOS设备上给body绑定click事件不生效的原因及解决办法
01-05
　最近在做一个移动端业务的时候碰到一个bug，在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效。 思考： 　暂借助jquery展示下事件绑定代码，将所有标签含有data-tip属性的元素通过事件代理至...
jquery绑定事件不生效的解决方法
10-26
jquery绑定click事件，怎么都不生效，这个问题很多朋友都有遇到过，下面为大家解决一下,需要的朋友可以参考下
click事件不生效
baidu_41909653的博客
05-18 1244
问题描述 动态加载的元素上click事件不生效 $(".openORclose2").click(function () { if ($(this).hasClass("checkOpen2")) { $(this).removeClass("checkOpen2"); $(this).parent().parent().removeClass("QAhover"); $(this).parent().parent().
click无效问题
weixin_36448423的博客
08-28 1735
平常点击触发事件我用jquery click来处理，但是这样的方法在静态已经存在的元素是可以的，动态生成的是不行的，比如layui中动态，要用下面一种 不起作用： $('#test').on('click', function() { layer.msg('响应点击事件'); }); 起作用了： $(document).on('click', '#test', function() { ...
autojs项目搭建和入门实践
最新发布
YJT1002的博客
04-26 1782
Auto.js 是一款无需的javascript自动化软件，它可以帮助用户在手机上自动执行各种任务，比如自动填写表单、自动点击按钮、自动切换应用等，并且可以通过来管理和编辑脚本。
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 5527
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
vue 元素绑定的@click方法失效问题
热门推荐
千里之行，始于足下！
10-12 2万+
今天做项目时发现一个在元素绑定的事件不生效的问题，作此记录以提醒自己。具体代码如下： <el-button @click="clickFun">按钮111</el-button> <button @click="clickFun([1,2,3,4])">按钮222</button> import {getInfo} from './api/test.js' //api接口 export default { name: 'test', data(){
Jquery对新插入的节点 绑定Click事件失效的解决方法
10-22
总结来说，解决jQuery对新插入节点绑定`click`事件失效的问题，主要是通过使用`on`方法进行事件委托，让事件处理程序绑定到不会被动态修改的父元素上，从而确保对新插入的子元素的事件监听有效。当然，要根据实际...
JS--$('...').click()不生效的原因
小小黑丶的博客
12-13 1万+
1. $('...').click() 当选中的选择器被点击时触发回调函数fn，$('...').click()只能为页面已经存在的元素绑定点击事件；如果是动态生成的新的元素，是触发不了事件的。 2.$(document).on('click','.className',function(){}) on方法包含很多事件，点击，双击等等事件。$(document).on('click',...
Vue点击事件失效
m0_56800567的博客
09-20 8458
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
jQuery中$.click()无效问题分析
12-09
今天做表格前台导出到xls时，想自动触发a的点击。但失败。最后找到这个文件。 我尝试过多次用jQuery模拟用户点击a标签的功能，但都没有成功，并且困扰了很久。前段时间的一次发呆，冒出了新的想法，于是就动手进行了测试。 先看下边的代码： 代码如下:  <html> <head>磨途歌-A标签测试1<head> <body>    磨途歌 </body> </html> [removed]<
在Vue中@click方法不起效
m0_52228992的博客
01-31 995
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
vue中@click绑定事件点击不生效
jiangjunyuan168的博客
10-24 1万+
原因： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 解决方法： 方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符） @click.native = "..." 方法2：向外发送click事件 添加 methods 内添加 _click 方法： methods: { _click: functi
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
Vue下拉框使用@click点击失效的解决方案
ws135867的博客
07-18 1469
通过各种尝试后，我发现在option中设置@click事件可以完美的解决以上问题。但是select下的option标签理论上是无法监听点击事件的，所以我在@click后面添加了.native修饰符。给select组件设置@click事件点击没有反应，设置@change事件也无法满足要求（这里涉及到click和change事件得执行顺序。@change：选择下拉框中的某个选项，当将要选择的选项与正在框中的值不一样才为一次change事件。但是文本框中的内容总是与我下拉框选中的值不一致。
@click失效？@click.native
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-21 2098
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2230
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
pyautogui.click不生效
06-01
当`pyautogui.click()`函数不生效时，可能有多种原因，以下是一些可能的解决方案： 1. 检查屏幕分辨率是否正确。`pyautogui.click()`函数中传入的坐标参数应该是相对于屏幕左上角的绝对坐标。如果你的屏幕分辨率...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值