JS foreach - mouseenter事件无法正常工作

Question

您好我正在尝试制作响应式布局，该布局会在加载数据时发生变化。

这是我的代码：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty">
        <h2><span data-bind="text: name"> </span></h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

上面的代码给出了与硬编码行相同的结果，如下所示：

<div class="row">
    <div class="col-md-4" data-name="Test1" id="oferty">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

但我的事件脚本仅适用于硬编码：

$("#oferty.col-md-4").mouseenter(function () {
    console.log("wszedlem");        
}).mouseleave(function () {
    console.log("wyszedłem");
});

我认为问题在于Knockout绑定及其UI刷新。我的布局使用我的数据正确呈现，但页面源未更改，如下所示：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty">
        <h2><span data-bind="text: name"> </span></h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

所以我的Jquery脚本无法在foreach语句中找到＃oferty.col-md-4选择器。任何人都可以建议我解决这个问题吗？

好的，在我的帮助下，我强行工作，但几乎没有问题：

使用事件绑定加上此代码：

function mouseEnter()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}
function mouseOut()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}

我有很多函数调用： 输入时：调用mouseEnter和mouseOut。 当离开mouseOut被叫2次

时

代表：

$("div").delegate("#oferty.col-md-4", "mouseenter", function () {   
    console.log("delegate in"); 
});
$("div").delegate("#oferty.col-md-4", "mouseleave", function () {
    console.log("delegate out");
}); 

离开时输入4个电话，我有4个电话。

在我的FullViewModel下面：

var infowindow = new google.maps.InfoWindow({ content: "empty" });
var markers = [];
var rows = [];

function point(name, lat, long) {
    var self = this;
    self.name = name;
    self.lat = lat;
    self.long = long;

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    title: name,
    map: map,
    draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function () {
    console.log(marker.title);
    infowindow.setContent(marker.title);
    infowindow.open(map, marker);

}.bind(this)); 
google.maps.event.addListener(marker, 'click', function () {
    alert(marker.title);
    console.log(marker.title);

}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
    infowindow.close();
}.bind(this));
markers.push(marker);
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('Test1', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])    
};

$("#oferty.col-md-4")
    .mouseenter(function () {
        console.log("wszedlem");
        var poszukiwane=$(this).attr("data-name");
        //showMarkerFromMenu($(this).attr("data-name"));
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].title == poszukiwane) {
                infowindow.setContent(markers[i].title);
                infowindow.open(map, markers[i]);
            }
        }


    })
.mouseleave(function () {
    infowindow.close();
});
function mouseEnter()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}
function mouseOut()
{
    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);
}
/*
$("div").delegate("#oferty.col-md-4", "mouseenter", function () {   
    console.log("delegate in"); 
});
$("div").delegate("#oferty.col-md-4", "mouseleave", function () {
    console.log("delegate out");
});   */
ko.applyBindings(viewModel);

几乎所有布局：

<div class="row">
    <div class="col-md-4">
        <section id="Map" class="fixed-location">
            <div id="googleMap" style="width:350px;height:600px;"></div>
        </section>
  </div> 
  <div class="col-md-8">
        <div class="row" data-bind="foreach: points">
            <div class="col-md-4" id="oferty"
                 data-bind="event: { mouseenter: mouseEnter, mouseout: mouseOut}, name: name">
                <h2><span data-bind="text: name"> </span></h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4" data-lat="50.12" data-lng="19.10" data-name="Test1" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
            <div class="col-md-4" data-lat="50.13" data-lng="19.10" data-name="Test2" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
            <div class="col-md-4" data-lat="50.14" data-lng="19.10" data-name="Test3" id="oferty">
                <h2>Get more libraries</h2>
                <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
                <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
            </div>
        </div>
  </div>
<div>

脚本等包含和工作，但我没有粘贴代码片段

Answer 1

您似乎尝试在初始化viewModel之前添加mouseenter / mouseleave处理程序。

您可以尝试此解决方案：

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

$("#oferty.col-md-4").mouseenter(function () {
    console.log("wszedlem");        
}).mouseleave(function () {
    console.log("wyszedłem");
});

但最好的方法是使用敲除事件绑定：

<div class="row" data-bind="foreach: points">
    <div class="col-md-4" data-name="text: name" id="oferty" 
       data-bind="event: { mouseenter: mouseEnter, mouseout: mouseOut}">
        <!-- Your layout -->
    </div>
</div>

<强>更新

关于：

data-name="Test1" 

它应该是这样的：

data-bind="text: Name"

<强> UPDATE2：

您没有删除ViewModel中的jQuery事件处理程序。删除它们（从行$（“＃oferty.col-md-4”）开始）。只保留mouseEnter，mouseLeave函数！

<强> UPDATE3：

好的，我调试了你的代码并发现了很多bug。多个mouseenter / mouseout调用的原因是html元素，你添加了事件绑定。 MouseEnter / MouseLeave事件调用每个子html元素，因此当您为div定义它时，它会在您输入/离开子元素时调用。

我创建了一个简单的演示here

Answer 2

请试试这个;

$("#oferty.col-md-4").on("mouseenter",function(){
  console.log("wszedlem");        
}).on("mouseleave",function(){
console.log("wyszedłem");
})