Question

关于此主题的资源很多，但是最近一个小时我一直在兜圈子。有人可以帮我吗？

我有以下代码：

    $(document).ready(function() {
      $('#init').click(function() {
        var width = parseInt($('#width').val());
        var height = parseInt($('#height').val());
        var multX = parseInt($('#multX').val());
        var multY = parseInt($('#multY').val());
        var tileSize = parseInt($('#tileSize').val());
        var nTiles = ((width * multX) / tileSize) * ((height * multY) / tileSize);
        BuildMap(width, height, multX, multY, tileSize);
      });

      function BuildMap(width, height, multX, multY, tileSize) {
        var cols = (width / tileSize) * multX;
        var rows = (height / tileSize) * multY;
        var tileSizeX = Math.floor((1800 / cols));
        var tileSizeY = Math.floor((1000 / rows));

        var index = 0;
        for (var i = 0; i < rows; i++) {
          for (var j = 0; j < cols; j++) {
            $('#map').append('<div class="tile" id="' + index + '" style="width:' + tileSizeX + 'px;height:' + tileSizeY + 'px;"></div>');
            index++;
          }
        }
      }

      $('#map').on('click', '.tile', function() {
        console.log('j');
        $(this).css({
          'background-color': 'red'
        });
      });
    });

    #map {
    	width: 1800px;
    	height: 1000px;
    	line-height: 0;
    	margin-right: 40px;
    }
    
    #mapWrap {
    	overflow: auto;
    }
    
    #wrap {
    	width: 800px;
    	height: 400px;
    }
    
    #select {
    	width: 200px;
    	display: inline-block;
    }
    
    #terrainSelect {
    	float: right;
    	height: 300px;
    	width: 220px;
    	top: 0;
    }
    
    .terrain {
    	width: 50px;
    	height: 50px;
    	padding: 10px;
    		display: inline-block;
    }
    
    .tile {
    	padding: 0px;
    	margin: 0px;
    	display: inline-block;
    }

    <!DOCTYPE html>
    <html>
    <head>
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    	<link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body>
    	<div class="container" id="wrap">
    	<h2>MAPEDITOR</h2>
    	  <div id="select">
    	  viewport width:<br>
    	  <input type="number" name="width" value="1800" id="width">
    	  <br>
    	  viewport height:<br>
    	  <input type="number" name="height" value="1000" id="height">
    	  <br>
    	  multX:<br>
    	  <input type="number" name="multX" value="4" id="multX">
    	  <br>
    	  multY:<br>
    	  <input type="number" name="multY" value="4" id="multY">
    	  <br>
    	  tileSize:<br>
    	  <input type="number" name="tileSize" value="32" id="tileSize">
    	  <br><br>	
    	  <input type="submit" value="init" id="init">
    	  </div>
    	</div>
    	
    	<div class="container" id="mapWrap">
    		<div id="map"></div>
    	</div>

    	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    	<script src="map.js"></script>
    </body>
    </html>

无论出于何种原因，＃map的click事件处理程序均不会触发。我可以看到在每个附加元素上都设置了该类。有人有想法么？我正在使用jQuery 3.4

具有动态Divs的JQuery .on Selector不起作用

0 个答案: