Question

如何获得＆＃34; onclick＆＃34;点击jquery上链接中的div后？

<a href="#">
   <img src="some.jpg" />
   <div class="cont" onclick="showDiv()"></div>
</a>

img {
    position: relative;
}

.cont {
    position: absolute;
    top: 0px;
    right: 0px;
}

当你点击区域＆＃34; .cont＆＃34时，我希望你能够处理这个事件。我试过这个：

$(document).ready(function() { 
    function showDiv() { 
        alert("test"); 
    } 
});

我的js

$('#tmp').justifiedGallery({
        rowHeight: 350,
        maxRowHeight: '100%'
    }).on('jg.complete', function () {
        $(this).find('a').colorbox({
            maxWidth : '90%',
            maxHeight : '90%',
            opacity : 0.2,
            transition : 'elastic',
            current : ''
        });
    });

Answer 1

您在document.ready处理程序中定义了showDiv()函数，因此它超出了onclick属性的范围。您需要在较低级别定义函数：

<head>
    <script type="text/javascript">
        function showDiv() { 
            alert("test"); 
        } 

        $(document).ready(function() { 
            // jquery code here...
        });
    </script>
</head>

完全更好的解决方案是使用Javascript来附加您的活动，因为它可以更好地分离关注点并删除过时的onclick属性：

<a href="#">
   <img src="some.jpg" />
   <div class="cont"></div>
</a>

$(document).ready(function() { 
    $('.cont').click(function() {
        alert('test');
    });
});

Answer 2

你不能在$（document）.ready（function（）

中编写这样的函数

试试这个

ID

或

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-2.2.1-all.zip

Answer 3

有两种方法可以做到这一点。

我这样做的方式：

$('.cont').on('click', function(){
  alert('qwerty');
});

这样你就不需要HTML中的 onclick =“showDiv（）”，这会让你的HTML变得更干净。

使用 onclick 元素的方式：

function showDiv(){
  alert('zxcvb');
}

Sample at CodePen

如何获得＆＃34; onclick＆＃34;点击链接中的div后？

3 个答案: